Capturando la tecla TAB en el cuadro de texto [cerrado]

100

Me gustaría poder usar la Tabclave dentro de un cuadro de texto para tabular en cuatro espacios. Como está ahora, la tecla Tab salta mi cursor a la siguiente entrada.

¿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 combo de teclas personalizado como Shift+ Tabo Ctrl+ Q?

javascript user-interface Seibar
fuente
No olvide verificar la ventana enfocada y dejar que burbujee normalmente si no está en el área de texto del editor.
FlySwat
Esta publicación fue marcada por el moderador como "pertenece a meta.stackoverflow.com", pero tiene más de dos años, así que no la migraré.
Robert Harvey

Respuestas:

108

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

En Firefox, puede llamar al preventDefault()método en el objeto de evento pasado a su controlador de eventos. En IE, debe devolver falso desde el identificador del evento. La biblioteca JQuery proporciona un preventDefaultmétodo 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>
ScottKoon
fuente
1
Acabo de corregir la línea 4, de "if (el.attachEvent)" a "if (myInput.attachEvent)"
Fenton
Tenga en cuenta que este código agrega TAB solo al final. Es un inconveniente en la mayoría de las ocasiones.
Alexander Palamarchuk
@SteveFenton ¿Existe una forma sencilla de volver a eliminar los espacios keycode 8?
yckart
18

Prefiero que la sangría de tabulación no funcione que romper tabulación entre elementos de formulario.

Si desea aplicar sangría 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 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 varios navegadores.

Lauren
fuente
13

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 event (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
  }
}
Tom
fuente
6

Aconsejaría no cambiar el comportamiento predeterminado de una clave. Hago todo lo que puedo sin tocar el 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 método abreviado podría ser útil, especialmente con bloques de código grandes y anidados. 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 WMD para insertar un código-TAB, con una tecla de método abreviado?

Wally Lawless
fuente
1
La pregunta depende completamente 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 la accesibilidad para mi único estudiante que era ciego. Ahora agregué soporte para pestañas, pero también proporcioné una opción de preferencia de usuario para desactivarlo.
Charles
@Charles muy buen punto sobre las implicaciones de accesibilidad.
Wally Lawless
4

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

chintan123
fuente
3

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

Aquí hay uno: . ¡Pequeñito!

Paul D. Waite
fuente