Notez que cet article a été écrit pour la première fois il y a plus de 4 ans, mais n'est pas nécessairement obsolète.
Lors de l’appui sur la touche tabulation dans une zone <textarea>, il y a perte du focus, et cela sélectionne les autres champs type input, button … s’il y en a:
Afin d’éviter cela et permettre à la touche tabulation d’avoir un véritable comportement de tabulation comme dans un éditeur:
Voilà un petit plugin jQuery à appliquer sur le <textarea>.
|
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 |
(function($) { $.fn.xbsAreaTab= function(){ return this.each(function() { $(this).on('keydown', function(e) { if(e.keyCode === 9) { // Appui sur la touche tab // Positions du curseur ou de la selection var start = this.selectionStart; var end = this.selectionEnd; // Place le contenu du textarea dans value var $this = $(this); var value = $this.val(); // Change le contenu de textarea : texte avant la sélection + tab + texte après $this.val(value.substring(0, start) + "\t" + value.substring(end)); // Positionne le curseur après la tabulation, efface la sélection this.selectionStart = this.selectionEnd = start + 1; // Désactive le comportement par défaut de tab e.preventDefault(); } }); }); } })(jQuery); |
Le code se décompose:
|
1 2 3 4 5 6 7 8 9 |
(function($) { $.fn.xbsAreaTab= function(){ return this.each(function() { -------code---------- }); } })(jQuery); |
Structure classique d’un plugin jQuery (explications sur un exemple),
|
1 2 3 4 5 6 |
$(this).on('keydown', function(e) {http://murviel-info-beziers/plugin-jquery-que-des-nombres-dans-un-champ-input-validation-avec-entree#xbsAncre if(e.keyCode === 9) { // Appui sur la touche tab --------code--------- } }); |
On écoute l’événement keydown sur le selecteur $(this) qui est l’élément sur lequel est appliqué le plugin, en l’occurrence, le <textarea>. On met e en argument pour récupérer cet événement et tester le code de la touche enfoncée. Le keyCode de tab est 9.
|
1 2 |
var start = this.selectionStart; var end = this.selectionEnd; |
On place les positions de début et de fin de la sélection dans 2 variables. Le mot-clé qui fait référence à l’objet est this, car selectionStart et selectionEnd sont des propriétés sur l’objet javascript et non jQuery. On utilise donc le mot-clé de javascript.
|
1 2 |
var $this = $(this); var value = $this.val(); |
On place la référence à l’objet $(this) dans une variable $this, et on lit le contenu du <textarea> grâce à $this.val() que l’on place dans value.
|
1 2 3 |
$this.val(value.substring(0, start) + "\t" + value.substring(end)); |
On substitue au contenu du <textarea>, le début non sélectionné (jusqu’à start), une tabulation, et la fin non sélectionnée. La partie sélectionnée est donc effacée.
|
1 |
this.selectionStart = this.selectionEnd = start + 1; |
On confond la position de début et de fin (il ne reste plus que le curseur) que l’on place un rang après start.
|
1 |
e.preventDefault(); |
Afin de prévenir le comportement par défaut de tab, on place sur l’événement preventDefault().
Le code du 2eme <textarea>:
|
1 2 3 4 5 6 |
<textarea id="xbs" rows="5" cols="50"> Selectionnez-moi et appuyez sur la touche tab. Testez le comportement en plaçant le curseur où vous voulez. </textarea> <script> $('#xbs').xbsAreaTab(); </script> |
cela peut servir si l’on a un long formulaire à remplir dans lequel la touche tab peut apporter une aide conséquente.
Ajout: Taille de la tabulation
Par défaut, la tabulation dans un <textarea> a une taille de 8 caractères espace. Pour modifier cela, on ajoute la propriété CSS: tab-size.
On ajoute le paramètre tabSize à notre plugin pour choisir cette taille:
|
1 2 3 4 5 6 7 |
(function($) { $.fn.xbsAreaTab= function(tabSize){ var tabSize= tabSize || -1; return this.each(function() { if (tabSize != -1) $(this).attr("style", "tab-size: "+tabSize); $(this).on('keydown', function(e) { --------code---------- |
Si le paramètre est omis, on lui donne la valeur -1
|
1 |
var tabSize= tabSize || -1; |
Si le paramètre est différent de -1, on attribue le style.
|
1 |
if (tabSize != -1) $(this).attr("style", "tab-size: "+tabSize); |
Cette manière peu académique de faire est une façon détournée pour attribuer le style, la commande suivante étant ignorée:
|
1 |
if (tabSize != -1) $(this).css("tab-size",tabSize); |
Enfin, on définit la taille de la tabulation dans l’appel du plugin:
|
1 2 3 |
<script> $('#xbs').xbsAreaTab(4); </script> |
Ici, on choisit 4 espaces pour la tabulation.
