¿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(); }); 
  • Deshabilitar temporalmente un button Enviar
  • Código JavaScript para capitalizar las inputs de text
  • Limite el número de páginas que se muestran en la pagination de bootstrap 3
  • Agregar script como cadena en el valor de textarea
  • Ejecutar javascript después de la presentación del formulario en el panel de actualización?
  • Cómo usar las herramientas de input de Google en el website
  • ¿Cómo build navigation simple y pegajosa con jQuery?
  • jQuery Validate, deja de enviar formulario
  • clonando un object de evento en javascript / jquery
  • "Malware Script" de Jquery
  • ¿Cuál es el patrón preferido para volver a vincular las interfaces de usuario de interfaz de usuario jQuery después de cargar AJAX?
  • jQuery UI arrastrable evita el desplazamiento en el mobile
  • ¿Guardar cadena de base64 como image usando phonegap?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.