¿Cómo manejar <tab> en textarea?

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

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

¿Puedo atrapar este evento y devolver el enfoque al área de text y agregar una pestaña a la position actual del cursor?

5 Solutions collect form web for “¿Cómo manejar <tab> en textarea?”

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

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.

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

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> 

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; }); } } 

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

  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(); }); 
  • Cómo seleccionar elementos consecutivos que coincidan con un filter
  • Unión de Knockout.js con Select2 múltiple
  • Cómo cargar datos en ckeditor onload
  • Imagen de background al 100% de la window (y cambia el tamaño con ella)
  • Tengo un problema con HTML que se creó con el código php
  • ¿Deberían todos los events de jquery vincularse a $ (documento)?
  • Construyendo una URL con parameters usando jQuery
  • jsPdf con html2canvas.js: error no detectado: los datos suministrados no son JPEG
  • Highcharts: muestra un marcador especial en el gráfico de columnas
  • Editar una celda de tabla HTML
  • control deslizante de range jquery: establecer max de slider 1 a min de control deslizante 2
  • Deshabilitar el enfoque automático de campo de text en Javascript
  • Documento de jQuery listo después de la request de ajax
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.