Discussion :

[ArkSeth]

Bon, que je vous explique...

Je cherche à faire une fonction javascript pour qu'appuyer sur la touche de tabulation alors qu'un textearea à le focus insère effectivement une tabulation dans ce textearea. De la manière la plus propre et la plus pratique, bien sur.

Eùh, oui, aussi, habituellement j'essaye de faire une version pour Firefox et une autre pour IE, mais dans le cas présent, seule la partie Firefox m'interresse.

Donc, j'ai commencé par simplement

Code :

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

1
2
3
4
5
function doTab(elem, even) {
	if (String.fromCharCode(even.which)=="\t") {
		elem.value += "\t";
	}
}

avec un onKeyDown="doTab(this, event);" dans le textarea concerné.

Bon, ça marche bien (Je développerais quand même plus tard pour que la tabulation soit affichée à l'endroit où se trouve le curseur, mais passons), sauf que ça n'empêche pas la fonction "normale" de la touche tabulation d'avoir lieu.

Alors bon, nouvelle tentative

Code :

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

1
2
3
4
5
6
function doTab(elem, even) {
	if (String.fromCharCode(even.which)=="\t") {
		elem.value += "\t";
		elem.focus();
	}
}

toujours onKeyDown.
Seulement là, ça ne change rien, parce que l'appel à focus() à lieu avant. J'essaye onKeyUp, mais dans ce cas, on a changé de champ avant que ça ait appelé la fonction.

Ruse de sioux, j'essaye

Code :

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

1
2
3
4
5
6
function doTab(elem, even, eid) {
	if (String.fromCharCode(even.which)=="\t") {
		elem.value += "\t";
		document.getElementById(eid).focus();
	}
}

en passant à la fonction onKeyDown, l'id du champ précédent le textarea. Comme ça, une fois la valeur modifiée, ça met le focus sur le champ prédécent, et donc, la tabulation me ramène sur le champ courant.

Oui mais! Appuyer simultanément sur les touches shift et tabulation donne un résultat absolument identique, à ceci près qu'avec le changement de focus, on se retrouve désormais deux champs plus haut. Pas glop. Et là, je sèche.

Donc voilà. Quelqu'un connaitrait-il un moyen de différencier tab de shift+tab, voire de parvenir à ce résultat d'une autre manière?

Merci d'avance.

[ArkSeth]

Eh bien, finalement, j'ai trouvé tout seul la réponse à mon problème ^^

Il suffit d'utiliser deux fonctions et un temporisateur...

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
function doFocus(elem, position) {
	elem.focus();
	elem.selectionStart = position;
	elem.selectionEnd = position;
}
 
function doTab(elem, even) {
	if (String.fromCharCode(even.which)=="\t") {
		var begin = elem.selectionStart;
		var end = elem.selectionEnd;
		elem.value = elem.value.substring(0, begin)+"\t"+elem.value.substring(end, elem.value.length);
		var position = end-(end-begin)+1;
		setTimeout(doFocus, 10, elem, position);
	}
}

Explication de texte... la fonction doFocus donne simplement le focus à l'élément concerné, et place en prime le curseur à la position indiquée en paramètre.
La fonction doTab, elle, ajoute une tabulation à la position où se trouve le curseur (s'il y a du texte séléctionné, celui-ci est remplacé), puis attends un centième de seconde (le temps que le champ suivant prenne le focus) pour lancer doFocus en indiquant l'élément courant et la nouvelle position du curseur...

Il suffit ensuite de placer onKeyDown="doTab(this, event);" dans chacun des textareas (voire des input type texte) où l'on souhaite pouvoir insérer une tabulation.

Bon, je ne garanti pas le résultat si l'utilisateur s'amuse à maintenir la touche tabulation enfoncée, mais c'est déja pas mal.
Tant que j'y suis, je vais essayer de faire marcher ça pour IE... Je vous tiens au courant.

[nicolas.poulain]

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
function doFocus(elem, position) {
	elem.focus();
	elem.selectionStart = position;
	elem.selectionEnd = position;
}
 
function doTab(elem, even) {
	if (String.fromCharCode(even.which)=="\t") {
		var scrollbar_mem = elem.scrollTop ;
		var begin = elem.selectionStart;
		var end = elem.selectionEnd;
		elem.value = elem.value.substring(0, begin)+"\t"+elem.value.substring(end, elem.value.length);
		var position = end-(end-begin)+1;
		setTimeout(doFocus, 10, elem, position);
		elem.scrollTop = scrollbar_mem ;
	}
}

Avec petit rajout dans le cas de scrollbar présent

Nico