tabindex javascript

¿Cómo manejar<tab> en textarea?

Question

Me gustaría un área de texto que maneje una situación de presionar la tecla de tabulación .

En el caso predeterminado, si presiona una tecla de tabulación , el foco deja el área de texto. Pero, ¿qué pasa con la situación en la que el usuario desea escribir la clave de tabulación en textarea?

¿Puedo atrapar este evento y devolver el enfoque al área de texto y agregar una pestaña a la posición actual del cursor?

Answer 1

Aquí hay una versión modificada de la respuesta de pimvdb que no necesita 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);

Lo probé en Firefox 21.0 y Chrome 27. No sé si funciona en otro lugar.

Answer 2

Dios mío, todas las respuestas anteriores no proporcionaron el control de ficha comúnmente decente (es decir, para programadores).

Es decir, un TAB colindado en la selección de líneas sangrará esas líneas, y SHIFT TAB las anulará.

_edited (Nov 2016): keyCode reemplazado por charCode || keyCode, por KeyboardEvent.charCode - API web | MDN

(function($) {
  $.fn.enableSmartTab = function() {
    var $this;
    $this = $(this);
    $this.keydown(function(e) {
      var after, before, end, lastNewLine, changeLength, re, replace, selection, start, val;
      if ((e.charCode === 9 || e.keyCode === 9) && !e.altKey && !e.ctrlKey && !e.metaKey) {
        e.preventDefault();
        start = this.selectionStart;
        end = this.selectionEnd;
        val = $this.val();
        before = val.substring(0, start);
        after = val.substring(end);
        replace = true;
        if (start !== end) {
          selection = val.substring(start, end);
          if (~selection.indexOf(''/n'')) {
            replace = false;
            changeLength = 0;
            lastNewLine = before.lastIndexOf(''/n'');
            if (!~lastNewLine) {
              selection = before + selection;
              changeLength = before.length;
              before = '''';
            } else {
              selection = before.substring(lastNewLine) + selection;
              changeLength = before.length - lastNewLine;
              before = before.substring(0, lastNewLine);
            }
            if (e.shiftKey) {
              re = /(/n|^)(/t|[ ]{1,8})/g;
              if (selection.match(re)) {
                start--;
                changeLength--;
              }
              selection = selection.replace(re, ''$1'');
            } else {
              selection = selection.replace(/(/n|^)/g, ''$1/t'');
              start++;
              changeLength++;
            }
            $this.val(before + selection + after);
            this.selectionStart = start;
            this.selectionEnd = start + selection.length - changeLength;
          }
        }
        if (replace && !e.shiftKey) {
          $this.val(before + ''/t'' + after);
          this.selectionStart = this.selectionEnd = start + 1;
        }
      }
    });
  };
})(jQuery);

$(function() {
  $("textarea").enableSmartTab();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="10" cols="80">
/* Just some code to edit with our new superTab */
(function($) {
    $.fn.enableSmartTab = function() {
        $this = $(this);
        $this.keydown(function(e) {
            if ((e.charCode === 9 || e.keyCode === 9) && !e.metaKey && !e.ctrlKey && !e.altKey) {
                e.preventDefault();
            }
        }
    }
}
</textarea>

Answer 3

En Vanilla (Default) JS esto sería:

var textareas = document.getElementsByTagName(''textarea'');
if ( textareas ) {
    for ( var i = 0; i < textareas.length; i++ ) {
        textareas[i].addEventListener( ''keydown'', function ( e ) {
            if ( e.which != 9 ) return;

            var start           = this.selectionStart;
            var end             = this.selectionEnd;

            this.value          = this.value.substr( 0, start ) + "/t" + this.value.substr( end );
            this.selectionStart = this.selectionEnd = start + 1;

            e.preventDefault();
            return false;
        });
    }
}

Answer 4

Encontrado esto durante la búsqueda de google. Hice uno muy corto que también puede sangrar y seleccionar sangría inversa de texto:

    jQ(document).on(''keydown'', ''textarea'', function(e) {
        if (e.keyCode !== 9) return;
        var Z;
        var S = this.selectionStart;
        var E = Z = this.selectionEnd;
        var A = this.value.slice(S, E);
        A = A.split(''/n'');
        if (!e.shiftKey)
            for (var x in A) {
                A[x] = ''/t'' + A[x];
                Z++;
            }
        else
            for (var x in A) {
                if (A[x][0] == ''/t'')
                    A[x] = A[x].substr(1);
                Z--;
            }
        A = A.join(''/n'');
        this.value = this.value.slice(0, S) + A + this.value.slice(E);
        this.selectionStart = S != E ? S : Z;;
        this.selectionEnd = Z;
        e.preventDefault();
    });

Answer 5

Habilitar la tabulación dentro de (múltiples) elementos textarea

Corregir @alexwells responde y habilita una demostración en vivo

var textAreaArray = document.querySelectorAll("textarea");
    for (var i = textAreaArray.length-1; i >=0;i--){
        textAreaArray[i].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);
    }

<textarea rows="10" cols="80"></textarea>
   <textarea rows="10" cols="80"></textarea>

Answer 6

Usted puede: 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();
    }
});