Curseur dans un textarea

**VonDriguen** · 11/03/2014, 13h00

Bonjour à tous,

Le but est simple : J'ai un bouton qui affiche une popup (en jquery) qui permet à l'utilisateur de taper une URL. L'URL est ensuite placée dans un textarea avec des balises BBCode. Le problème intervient s'il y a déjà du texte dans la zone. Quelque soit la position du curseur, les tags URL seront toujours présent au début.

Pouvez vous m'aider à résoudre ce problème ???

Le head avec les scripts :

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
/*****************************
	NORMAL TAGS FUNCTIONS
*****************************/
function insertTag(startTag, endTag, textareaId, tagType) {
	var field  = document.getElementById(textareaId); 
	var scroll = field.scrollTop;
	field.focus();
	/* Get selection */
	if (window.ActiveXObject) {
		var textRange = document.selection.createRange();            
		var currentSelection = textRange.text;
	} else {
		var startSelection   = field.value.substring(0, field.selectionStart);
		var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		var endSelection     = field.value.substring(field.selectionEnd);               
	}
	/* Insert */
	if (window.ActiveXObject) {
		textRange.text = startTag + currentSelection + endTag;
		textRange.moveStart("character", -endTag.length - currentSelection.length);
		textRange.moveEnd("character", -endTag.length);
		textRange.select();     
	} else {
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	} 
	field.scrollTop = scroll;     
}
function cancel(){
	window.history.back(-1);
}
/***********************
	JQUERY FUNCTIONS
***********************/
$(function() {
	var url = $( "#url" );
	$( "#dialog" ).dialog({
		autoOpen: false,
		buttons: {
			"Ajouter URL": function() {
				var starttag = "<a href="http://\"" + url.val() + "\"" target="_blank">";
				$( this ).dialog( "close" );
				insertTag(starttag,'</a>','textarea');
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		}
	});
	$( "#urlopener" ).click(function() {
		$( "#dialog" ).dialog( "open" );
	});
});

Le body :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<form id="modifier" action="..." method="post">
	<img src="../images/editor/link.png" alt="url" id="urlopener"/>
	<textarea id="textarea" name="modifycontent" cols="91" rows="20"><?php echo($htmlcontent) ?></textarea>
</form>
<!-- JQUERY Dialogs -->
<div id="dialog" title="URL dialog">
	<form>
		<fieldset>
		<label for="name">URL</label><input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all" value="http://">
		</fieldset>
	</form>
</div>
</body>