Positionnement du curseur

Version imprimable

bonjour,

je m'essai à coder un bbcode et j'ai une difficulté. j'ai effecuté plusieurs recherche mais je n'ai rien trouve qui corresponde a mes attentes !!

je m'explique !!!

je voudrais placer mon curseur dans mon textarea au milieu de l'insertion occasionné par le clic sur un bouton : j'appuye sur le bouton pour mettre en gras et cela affiche

1
[g][/g]
j'aimerais que le curseur se place automatiquement entre les balises créées.... c'est la que ça bloque !!!!

voici mon code :

Code:

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
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style_pour_test.css"/>
        <title>BBCODE </title>
        <script type="text/javascript">
        function gras()
        {
            document.getElementById("texte").value= document.getElementById("texte").value +"[g][/g]";
            document.getElementById("texte").focus();
        }
        function italique()
        {
            document.getElementById("texte").value=document.getElementById("texte").value + "";
            document.getElementById("texte").focus();
        }
        function souligner()
        {
            document.getElementById("texte").value=document.getElementById("texte").value + "";
            document.getElementById("texte").focus();
        }
        function bbcode()
        {
            var text = document.getElementById("texte").value;
            if(text)
            {
            text = text.replace(/\[g\]([\s\S]*?)\[\/g\]/g, '<strong>$1</strong>');
            text = text.replace(/\[i\]([\s\S]*?)\[\/i\]/g, '<em>$1</em>');
            text = text.replace(/\[s\]([\s\S]*?)\[\/s\]/g, '<span style="text-decoration:underline;">$1</span>');
            }
            else
            {
            text=text;
            }
            document.getElementById("resultat").innerHTML = text;
        }
        </script>
    </head>
    <body>
        <fieldset style="width:35%;background:red;">
            <p style="font-size:1.2em;">texte :</p>
            <input type="button" value="g" style="font-weight:bold;" onClick="gras()"/>
            <input type="button" value="i" style ="font-style:italic;" onClick="italique()"/>
            <input type="button" value="s" style ="text-decoration:underline;" onClick="souligner()"/>
 
            <textarea rows = "25" cols ="75" id="texte" onKeyup="bbcode()"
            onfocus="var t=this.value;this.value='';this.value=t" ></textarea>
        </fieldset>
        <div id="resultat"></div>
    </body>
</html>

merci pour votre aide !!!!!!!

20/05/2013, 22h25
NoSmoking

Bonsoir,
début de solution :fleche: http://www.developpez.net/forums/d10...nput-tabindex/

j'ai trouve ce que je cherchais !!!
voici mon code :

Code:

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
		<link rel="stylesheet" href="style_pour_test.css"/>
		<title>BBCODE </title> 
		<script type="text/javascript">
		function gras()
		{
			insertion("[g]","[/g]");
		}
		function italique()
		{
			insertion("","");
		}
		function souligner()
		{
			insertion("","");
		}
		function bbcode()
		{
			var text = document.getElementById("texte").value;
			if(text)
			{
			text = text.replace(/\[g\]([\s\S]*?)\[\/g\]/g, '<strong>$1</strong>');
			text = text.replace(/\[i\]([\s\S]*?)\[\/i\]/g, '<em>$1</em>');
			text = text.replace(/\[s\]([\s\S]*?)\[\/s\]/g, '<span style="text-decoration:underline;">$1</span>');
			}
			else
			{ 
			text=text;
			}
			document.getElementById("resultat").innerHTML = text;
		}
		function insertion(repdeb, repfin) {
		  var input = document.getElementById("texte");
		  input.focus();
		  /* pour l'Explorer Internet */
		  if(typeof document.selection != 'undefined') {
			/* Insertion du code de formatage */
			var range = document.selection.createRange();
			var insText = range.text;
			range.text = repdeb + insText + repfin;
			/* Ajustement de la position du curseur */
			range = document.selection.createRange();
			if (insText.length == 0) {
			  range.move('character', -repfin.length);
			} else {
			  range.moveStart('character', repdeb.length + insText.length + repfin.length);
			}
			range.select();
		  }
		  /* pour navigateurs plus récents basés sur Gecko*/
		  else if(typeof input.selectionStart != 'undefined')
		  {
			/* Insertion du code de formatage */
			var start = input.selectionStart;
			var end = input.selectionEnd;
			var insText = input.value.substring(start, end);
			input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
			/* Ajustement de la position du curseur */
			var pos;
			if (insText.length == 0) {
			  pos = start + repdeb.length;
			} else {
			  pos = start + repdeb.length + insText.length + repfin.length;
			}
			input.selectionStart = pos;
			input.selectionEnd = pos;
		  }
		  /* pour les autres navigateurs */
		  else
		  {
			/* requête de la position d'insertion */
			var pos;
			var re = new RegExp('^[0-9]{0,3}$');
			while(!re.test(pos)) {
			  pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
			}
			if(pos > input.value.length) {
			  pos = input.value.length;
			}
			/* Insertion du code de formatage */
			var insText = prompt("Veuillez entrer le texte à formater:");
			input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
		  }
		}
		</script>
	</head> 
	<body> 
		<fieldset style="width:35%;background:red;">
			<p style="font-size:1.2em;">texte :</p>
			<input type="button" value="g" style="font-weight:bold;" onClick="gras()"/>
			<input type="button" value="i" style ="font-style:italic;" onClick="italique()"/>
			<input type="button" value="s" style ="text-decoration:underline;" onClick="souligner()"/>
				
			<textarea rows = "25" cols ="75" id="texte" onKeyup="bbcode()" 
			onfocus="var t=this.value;this.value='';this.value=t" ></textarea>
		</fieldset>
		<p id="resultat" ></p>
	</body> 
</html>

merci pour votre aide