javascript - tabulaciones - ¿Impedir la acción predeterminada para la tecla de tabulación en Chrome?

tabulaciones en word 2016

Question

Quiero PREVENIR la acción predeterminada cuando se presiona la tecla de tabulación y solo quiero hacerlo en chrome, no puedo encontrar una solución para eso, ¿alguien puede ayudarme?

estoy usando jQuery

Answer 1

Esto puede ser un poco tarde, pero al combinar la respuesta de @ EvgueniNaverniouk y el comentario de @K ._ (en la respuesta de @ Joshua_Pendo), se determina que debe usar onkeydown y el más reciente event.key lugar de event.keyCode . Lo que hace event.key es que devuelve el nombre de la clave en lugar del código. Por ejemplo, la tecla de tab se devolverá como "Tabulación" (esto distingue entre mayúsculas y minúsculas). Aquí está el código de trabajo terminado:

function checkForTab(event) {
    if (event.key == "Tab") {
        event.preventDefault();
    }
    else {
        //whatever stuff if not Tab
    }
}
document.getElementById("element").onkeydown = checkForTab(event);

function checkForTab(event) {
 if (event.key == "Tab") {
  event.preventDefault();
        document.getElementById(''element'').value += " Also notice this text appears every time you press tab!";
 }
 else {
  //whatever stuff if not Tab
 }
}
document.getElementById(''element'').onkeydown = checkForTab;
//Trick is to use keydown and use event.key instead of keyCode

<textarea id="element" style="width: 300px; height: 100px;">Press tab key here, you''ll see default action doesn''t occur!</textarea>

Ejecute el fragmento de código de arriba para ver un ejemplo de lo que quiero decir. Ahora puede usar un código como este para reemplazar la acción predeterminada de la pestaña con la acción que agrega espacios a un área de texto. Nota: la razón por la que uso .key lugar de .keyCode es porque .keyCode ahora está en desuso como @ K._ mencionado. ¡Espero que esto ayude!

Answer 2

JS:

  document.getElementById(''message_textarea'').addEventListener(''keydown'', (event) => {
    console.log(''tab pressed on message textarea'');
    if (event.keyCode === 9) {
      event.preventDefault();
    }
  });

HTML:

<textarea id="message_textarea"></textarea>

Answer 3

Aquí hay un artículo sobre cómo detectar chrome: http://javascriptly.com/2008/09/javascript-to-detect-google-chrome/

Y esta pregunta: Deshabilitar la tecla de tabulación en un div específico puede ayudarlo a deshabilitar la tecla de tabulación. Si puedes combinar ambos, probablemente lo tengas funcionando.

La función de deshabilitar se convertiría en algo como:

$(''.textarea'').on(''keyup mouseup'', function(e) {
  if(e.which == 9) { e.preventDefault(); }
});

e.which = 9 es la tecla de tabulación de acuerdo con el último enlace dado. Si puede ajustar la detección del navegador a su alrededor, supongo que tiene su ejemplo de trabajo.

Answer 4

input.keydown(function(event){
    if (event.keyCode === 9) {
        event.preventDefault();
    }
})

En keyup es demasiado tarde, debe llamar al evento en keydown. Eso funcionó para mí.