Captura de la tecla TAB en el cuadro de texto

Me gustaría poder utilizar la tecla dentro del cuadro de texto para tabular en cuatro espacios. Como está ahora, la tecla Tab salta mi cursor a la siguiente entrada.Captura de la tecla TAB en el cuadro de texto

¿Hay algún JavaScript que capture la tecla Tab en el cuadro de texto antes de que aparezca en la interfaz de usuario?

Entiendo que algunos navegadores (es decir, FireFox) pueden no permitir esto. ¿Qué tal un par clave-combo como Shift +Tab, o Ctrl +Q?

Fuente

2008-08-06 Seibar

Esta publicación recibió un indicador de moderador como "pertenece a meta.stackoverflow.com", pero tiene más de dos años, así que no la estoy migrando. –

No olvide verificar la ventana enfocada, y dejarla burbujear normalmente si no está en el editor textarea. – FlySwat

Incluso si captura el evento keydown/keyup, esos son los únicos eventos que se activan con la tecla tab, aún necesita alguna forma de evitar que ocurra la acción predeterminada, pasando al siguiente elemento en el orden de tabulación.

En Firefox puede llamar al método preventDefault() en el objeto de evento pasado a su controlador de eventos. En IE, debe devolver falso desde el identificador de evento. La biblioteca JQuery proporciona un método preventDefault en su objeto de evento que funciona en IE y FF.

<body> 
<input type="text" id="myInput"> 
<script type="text/javascript"> 
    var myInput = document.getElementById("myInput"); 
    if(myInput.addEventListener) { 
     myInput.addEventListener('keydown',this.keyHandler,false); 
    } else if(myInput.attachEvent) { 
     myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ 
    } 

    function keyHandler(e) { 
     var TABKEY = 9; 
     if(e.keyCode == TABKEY) { 
      this.value += " "; 
      if(e.preventDefault) { 
       e.preventDefault(); 
      } 
      return false; 
     } 
    } 
</script> 
</body>

Fuente

2008-08-16 13:55:26 ScottKoon

Acabo de corregir la línea 4, desde "if (el.attachEvent)" a "if (myInput.attachEvent)" – Fenton

Observe que este código agrega TAB solo al final. Es inconveniente en la mayoría de las ocasiones. –

@SteveFenton ¿Hay una manera simple de eliminar los espacios de nuevo con 'keycode'' 8'? – yckart

La respuesta anterior está bien, pero soy uno de esos tipos que está firmemente en contra de mezclar el comportamiento con la presentación (poner JavaScript en mi HTML) así que prefiero poner mi lógica de manejo de eventos en mis archivos JavaScript. Además, no todos los navegadores implementan el evento (o e) de la misma manera. Es posible que desee hacer una verificación antes de ejecutar cualquier lógica:

document.onkeydown = TabExample; 

function TabExample(evt) { 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var tabKey = 9; 
    if(evt.keyCode == tabKey) { 
    // do work 
    } 
}

Fuente

2008-08-06 13:35:44 Tom

prefiero pestaña muesca no trabajo de romper la tabulación entre elementos de formulario.

Si desea sangrar a poner en Codigo de la caja de rebajas, utilice Ctrl +K (o ⌘K en un Mac).

En términos de detener realmente la acción, jQuery (que usa Stack Overflow) evitará que un evento burbujee cuando devuelva falso de una devolución de llamada de evento. Esto hace la vida más fácil para trabajar con múltiples navegadores.

Fuente

2008-08-06 13:36:04 Lauren

Recomendaría no cambiar el comportamiento predeterminado de una tecla. Hago todo lo posible sin tocar el mouse, así que si haces que mi tecla de tabulación no se mueva al siguiente campo de un formulario, me agravará mucho.

Sin embargo, una tecla de método abreviado podría ser útil, especialmente con bloques de código grandes y anidamiento. Shift-TAB es una mala opción porque normalmente me lleva al campo anterior en un formulario. Tal vez un nuevo botón en el editor de WMD para insertar un código-TAB, con una tecla de acceso directo, sería posible?

Fuente

2008-08-06 13:36:33

La pregunta depende totalmente de la aplicación. Estoy trabajando en un control de editor de código. No proporcioné una tecla de tabulación y todos mis alumnos se quejaron. No lo hice porque no quería romper el acceso de mi único alumno que era ciego. Ahora agregué compatibilidad con pestañas, pero también proporcioné una opción de preferencia del usuario para desactivarla. – Charles

@Charles muy buen punto sobre las implicaciones de accesibilidad. –

En Chrome en Mac, alt-tab inserta un carácter de tabulación en un campo <textarea>.

Aquí hay una: ¡Pequeñito!

Fuente

2010-02-17 10:55:00

hay un problema de la mejor respuesta dada por ScottKoon

aquí es que

} else if(el.attachEvent) { 
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ 
}

Debe ser

} else if(myInput.attachEvent) { 
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ 
}

Debido a esto no funciona en IE. Esperando que ScottKoon actualice el código

Fuente

2010-09-09 06:14:55 chintan123

Captura de la tecla TAB en el cuadro de texto

Respuesta

Cuestiones relacionadas