javascript - tab - poner el foco en un input html
Capturando la tecla TAB en el cuadro de texto (6)
Me gustaría poder usar la tecla Tab en un cuadro de texto para tabular en cuatro espacios. Tal como está ahora, la tecla TAB salta mi cursor a la siguiente entrada.
¿Hay algún JavaScript que capture la tecla Tabulador 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 combo de teclas personalizado como Shift + Tab o Ctrl + Q ?
Aconsejaría no cambiar el comportamiento predeterminado de una clave. Hago todo lo posible sin tocar un mouse, por lo que si haces que mi tecla de tabulación no se mueva al siguiente campo en un formulario, me agravaré mucho.
Sin embargo, una tecla de acceso directo 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. ¿Quizás sería posible un nuevo botón en el editor de ADM para insertar un código-TAB, con una tecla de acceso directo?
En Chrome en Mac, alt-tab inserta un carácter de tabulación en un campo <textarea> .
Aquí hay uno: . ¡Pequeñito!
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 (oe) 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
}
}
Prefiero que la sangría de tabulación no funcione que dividir la tabulación entre los elementos del formulario.
Si desea sangrar para poner código en el cuadro Markdown, use Ctrl + K (o ⌘K en una Mac)
En términos de detener realmente la acción, jQuery (que utiliza ) detendrá la propagación de un evento 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.
hay un problema en la mejor respuesta dada por ScottKoon
aquí es
} else if(el.attachEvent ) {
myInput.attachEvent(''onkeydown'',this.keyHandler); /* damn IE hack */
}
Debiera ser
} else if(myInput.attachEvent ) {
myInput.attachEvent(''onkeydown'',this.keyHandler); /* damn IE hack */
}
Debido a esto no funcionó en IE. Esperando que ScottKoon actualice el código
Incluso si captura el evento keydown / keyup , esos son los únicos eventos que keyup la tecla de tabulación, todavía necesita alguna forma de evitar que ocurra la acción predeterminada, moviéndose al siguiente elemento en el orden de tabulación.
En Firefox puede llamar al preventDefault() en el objeto de evento pasado a su controlador de eventos. En IE, debe devolver false desde el identificador de eventos. 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>