sergzach
Quisiera un textarea que maneje una situación de presionar pestaña llave.
En el caso predeterminado, si presiona un pestaña key luego el foco sale del área de texto. Pero, ¿qué pasa con la situación cuando el usuario quiere escribir? pestaña clave en el área de texto?
¿Puedo capturar este evento y devolver el foco al área de texto y agregar una pestaña a un Actual posición del cursor?
pimvdb
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();
}
});
@Amine: para evitar la función de pestaña predeterminada del navegador. Ahora veo que no es necesario. Voy a tener una búsqueda sobre esto. EDITAR: return false parece incluir preventDefault: stackoverflow.com/questions/1357118/….
– pimvdb
26 mayo 2011 en 15:01
También se implementó la sobrescritura de selección.
– pimvdb
27 mayo 2011 en 16:12
@sergzach: Mi solución no funciona en absoluto en IE8, porque no es compatible selectionStart/selectionEnd. Tendrías que crear rangos de texto, pero todavía no entiendo cómo funciona eso, me temo…
– pimvdb
05 jul.
Esto frena la función de deshacer de los navegadores (Ctrl+z)
– 01AutoMonkey
23 mar. 17 a las 19:49
No estoy seguro de cómo/por qué se perdió esto, en la última llamada de subcadena comienzo se debe dar como primer argumento: + value.substring(start, end)); — De lo contrario, al seleccionar texto, se borra el texto.
– Asaf
22 mayo 2017 en 15:10
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.
Para aplicar esto a todas las áreas de texto, use querySelectorAll, enumere la lista devuelta y agregue el detector de eventos a cada elemento.
–Jeffrey LeCours
17 sep.
Para que este enfoque funcione, debe adjuntar el eventListener a individual elementos DOM. Para hacer eso: 1) obtener todos los elementos document.querySelectorAll("textarea") 2) recorrer la matriz para adjuntar el detector de eventos a cada elemento. Entonces debería funcionar
– Amjad
20 feb. 18 en 11:48
Rompe la funcionalidad de deshacer como la respuesta aceptada.
– Daniel
26 mayo 2018 en 18:49
orwellófilo
Dios mío, todas las respuestas anteriores no proporcionaron el control de pestañas comúnmente decente (es decir, para programadores).
Es decir, un golpe PESTAÑA en la selección de líneas sangrará esas líneas, y CAMBIOPESTAÑA los quitará la sangría.
_editado (noviembre de 2016): keyCode reemplazado por charCode || código clave, 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, '$1t');
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>acabo de escribir mi código para lograr esta función. En circunstancias en las que no debe usar jQuery, considere usar mi código.
– Константин Ван
19 nov.
@ K._ buen código, pero recomendaría ejecutarlo a través del cierre de babel o google para eliminar los componentes de ES6. ES6 es genial, pero hay demasiados usuarios que no usan navegadores compatibles con ES6. también event.key no es (IIRC) consistente en todos los navegadores, las claves pueden llamarse cosas diferentes en diferentes navegadores, y Safari no admite la propiedad en absoluto. Este es el otro La razón por la que la gente usa jQuery, aunque a menudo se olvida, es para garantizar la compatibilidad entre navegadores. No estoy criticando tus esfuerzos, creo que hiciste un gran trabajo, pero tiene que funcionar en todos los navegadores.
– Orwellófilo
20 nov.
@ K._ si observa el código que escribí, en realidad no hay mucho jQuery allí. Excluyendo la adición del oyente, el único uso real de jQuery es $.fn.val. El controlador en sí ya usa propiedades de eventos nativos.
– Orwellófilo
20 nov.
¿Qué significa ~ y !~?
– 1,21 gigavatios
23 feb. 19 a las 4:07
@ 1.21 gigavatios es el operador no bit a bit, hay una explicación bastante buena de por qué se usa aquí aquí
– peabrainiac
17 oct.
Marcos
En Vanilla (Predeterminado) 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;
});
}
}textarea {
border: 1px solid #cfcfcf;
width: 100%;
margin-left: 0px;
top: 0px;
bottom: 0px;
position: absolute;
}<textarea>
var x = 10;
var y = 10;
</textarea>Habilitar tabulación dentro de (múltiples) elementos de área de texto
Corrigiendo la respuesta de @alexwells y habilitando 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>Uso de javascript de vainilla para habilitar el tabulado dentro de los elementos del área de texto
– Amjad
20 feb.
Encontré esto mientras buscaba en Google. Hice uno muy corto que también puede aplicar sangría y sangría inversa a las selecciones 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();
});
Uso de javascript de vainilla para habilitar el tabulado dentro de los elementos del área de texto
– Amjad
20 feb.
.
Posible duplicado de la pestaña Usar para sangrar en el área de texto
– Padre
02 ene.
Revisé algunas de las respuestas existentes y todas se quedan cortas de alguna manera (sin deshacer, bajo rendimiento, selección incorrecta después de eliminar la sangría). Recientemente escribí un pequeño módulo que maneja esto correctamente, llamado
indent-textarea– fregante
15 dic. 19 en 21:07