Plugin jQuery: utilisation de tab dans un <textarea>

Notez que cet article a été écrit pour la première fois il y a plus de 3 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>.

Le code se décompose:

Structure classique d’un plugin jQuery (explications sur un exemple),

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.

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.

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.

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.

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.

Afin de prévenir le comportement par défaut de tab, on place sur l’événement preventDefault().

Le code du 2eme <textarea>:

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:

Si le paramètre est omis, on lui donne la valeur -1

Si le paramètre est différent de -1, on attribue le style.

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:

Enfin, on définit la taille de la tabulation dans l’appel du plugin:

Ici, on choisit 4 espaces pour la tabulation.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *