Comment gérer <tab> dans textarea?

Question

Je voudrais un textarea qui gère une situation d'appuyer sur la touche de tabulation .

Par défaut, si vous appuyez sur une touche de tabulation, la mise au point laisse la zone de texte. Mais qu'en est-il de la situation où l'utilisateur veut taper la touche de tabulation dans textarea?

Puis-je attraper cet événement et remettre le focus sur la zone de texte et ajouter un onglet à la position actuelle du curseur?

Answer 1

Vous pouvez: http://jsfiddle.net/sdDVf/8/ .

---

 $("textarea").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});
 

Answer 2

Voici une version modifiée de la réponse de pimvdb qui n'a pas besoin de JQuery:

 document.querySelector("textarea").addEventListener('keydown',function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var target = e.target;
        var value = target.value;

        // set textarea value to: text before caret + tab + text after caret
        target.value = value.substring(0, start)
                    + "\t"
                    + value.substring(end);

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
},false);
 

Je l'ai testé sous Firefox 21.0 et Chrome 27. Je ne sais pas si cela fonctionne ailleurs.