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

StackOverflow https://stackoverflow.com/questions/3362

  •  08-06-2019
  •  | 
  •  

Pregunta

Me gustaría poder utilizar el Pestaña tecla dentro de un cuadro de texto para tabular en cuatro espacios.Tal como está ahora, la tecla Tab hace saltar mi cursor a la siguiente entrada.

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

Entiendo algunos navegadores (es decir,Firefox) puede no permitir esto.¿Qué tal una combinación de teclas personalizada como Cambio+Pestaña, o Control+q?

¿Fue útil?

Solución

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

En Firefox puedes llamar al preventDefault() método en el objeto de evento pasado a su controlador de eventos.En IE, debes devolver falso desde el identificador del evento.La biblioteca JQuery proporciona una preventDefault mé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>

Otros consejos

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

Si desea aplicar sangría para introducir código en el cuadro Markdown, utilice Control+k (o ⌘K en una Mac).

En términos de detener realmente la acción, jQuery (que utiliza Stack Overflow) detendrá la propagación de un evento cuando devuelva falso desde una devolución de llamada de evento.Esto facilita la vida al trabajar con varios navegadores.

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 desees realizar 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
  }
}

Yo desaconsejaría 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 enfadaré mucho.

Sin embargo, una tecla de acceso directo podría resultar útil, especialmente con bloques de código grandes y anidamiento.Shift-TAB es una mala opción porque normalmente me lleva al campo anterior de un formulario.¿Quizás sería posible un nuevo botón en el editor de armas de destrucción masiva para insertar un código TAB, con una tecla de acceso directo?

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

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

Aquí hay uno:.¡Pequeñito!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top