Plugin jQuery: utilisation de tab dans un <textarea>

Nov 27, 2014 | jQuery / js | 0 commentaire

Notez que cet article a été écrit il y a plus de 4 ans, mais il n'est pas forcément 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.

Soumettre un commentaire

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