Ecrire dans un textarea à l'emplacement du curseur

**diabli73** · 22/07/2013, 17h10

Bonjour, j'aimerais qu'en écrivant cliquant sur un bouton btnNom cela affiche un texte dans un textarea à l'endroit ou est placé le cursor et que cela n'efface pas le texte mais je ne vois pas comment faire.

pour l'instant j'ai fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<button id="btnNom" type="button" value="btnNom" >Nom</button>
 
<script>
 
$("#btnNom").click(function() {
	 $("textarea#contenuWorkflow").text("textenom");
 
 
});
 
</script>

Je sais que ça doit être un truc tout simple ou il faut utiliser le focus

**danielhagnoul** · 23/07/2013, 00h03

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button id="btnNom">Dupont Dupond</button>
 
<textarea>Un texte pas bien long.</textarea>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$( "#btnNom" ).on( "click", function(){
	var jObjTextAera = $( "textarea" ),
		str = jObjTextAera.val(),
		pos = jObjTextAera[0].selectionStart; // navigateur non obsolète, IE9 et +
 
	jObjTextAera.val( $.trim( str.slice( 0, pos ) ) + " " + $( this ).text() + " " + $.trim( str.slice( pos ) ) );
});

**diabli73** · 23/07/2013, 13h11

Bonjour, merci pour ton aide.
Le code ne me semble pas mal, mais il ne fait rien pour moi ni sous IE ni sous chrome, je clique sur le bouton et il ne se passe rien.

**Bovino** · 23/07/2013, 14h03

Tu peux déjà regarder du côté de Insertion de caractères spéciaux.

**danielhagnoul** · 23/07/2013, 14h31

Dans ma page de test, il fonctionne très bien ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
$( "#btnNom" ).on( "click", function(){
	var jObjTextAera = $( "textarea" ),
		str = jObjTextAera.val(),
		pos = jObjTextAera[0].selectionStart; // navigateur non obsolète, IE9 et +
 
	jObjTextAera.val( $.trim( str.slice( 0, pos ) ) + " " + $( this ).text() + " " + $.trim( str.slice( pos ) ) );
});
 
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<button id="btnNom">Dupont Dupond</button>
 
<textarea>Un texte pas bien long.</textarea>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-20T20:45:17.151+02:00" pubdate>2013-07-20T20:45:17.151+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**diabli73** · 23/07/2013, 15h59

Merci cela fonctionne avec ce code.
C'est niquel sous chrome cependant sous IE 8 cela ne fonctionne pas, il va falloir que je trouve une solution pour remplacer la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

pos = jObjTextAera[0].selectionStart; // navigateur non obsolète, IE9 et +

Ecrire dans un textarea à l'emplacement du curseur

jQuery

Discussions similaires

Partager

Partager