Capturando a tecla TAB na caixa de texto [fechada]

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

  •  08-06-2019
  •  | 
  •  

Pergunta

Eu gostaria de poder usar o Aba chave dentro de uma caixa de texto para tabular quatro espaços.Do jeito que está agora, a tecla Tab leva meu cursor para a próxima entrada.

Existe algum JavaScript que irá capturar a tecla Tab na caixa de texto antes que ela apareça na interface do usuário?

Eu entendo alguns navegadores (ou seja,FireFox) pode não permitir isso.Que tal uma combinação de teclas personalizada como Mudança+Aba, ou Ctrl+P?

Foi útil?

Solução

Mesmo se você capturar o keydown/keyup evento, esses são os únicos eventos que a tecla tab dispara, você ainda precisa de alguma maneira de evitar que a ação padrão, passar para o próximo item na ordem de tabulação, ocorra.

No Firefox você pode chamar o preventDefault() método no objeto de evento passado para seu manipulador de eventos.No IE, você deve retornar false do identificador de evento.A biblioteca JQuery fornece um preventDefault método em seu objeto de evento que funciona no IE e 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>

Outras dicas

Prefiro que o recuo da tabulação não funcione do que quebrar a tabulação entre os itens do formulário.

Se você quiser recuar para colocar código na caixa Markdown, use Ctrl+K (ou ⌘K em um Mac).

Em termos de realmente interromper a ação, o jQuery (que o Stack Overflow usa) impedirá que um evento borbulhe quando você retornar false de um retorno de chamada de evento.Isso facilita a vida de trabalhar com vários navegadores.

A resposta anterior é boa, mas sou um daqueles caras que é firmemente contra misturar comportamento com apresentação (colocar JavaScript em meu HTML), então prefiro colocar minha lógica de manipulação de eventos em meus arquivos JavaScript.Além disso, nem todos os navegadores implementam o evento (ou e) da mesma maneira.Você pode querer fazer uma verificação antes de executar qualquer lógica:

document.onkeydown = TabExample;

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

Eu desaconselho alterar o comportamento padrão de uma chave.Eu faço o máximo possível sem tocar no mouse, então se você fizer com que minha tecla Tab não passe para o próximo campo de um formulário, ficarei muito irritado.

No entanto, uma tecla de atalho pode ser útil, especialmente com grandes blocos de código e aninhamentos.Shift-TAB é uma opção ruim porque normalmente me leva ao campo anterior de um formulário.Talvez fosse possível um novo botão no editor WMD para inserir um código-TAB, com uma tecla de atalho?

há um problema na melhor resposta dada por ScottKoon

aqui está

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

Deveria estar 

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

Devido a isso não funcionou no IE.Esperando que ScottKoon atualize o código

No Chrome no Mac, alt-tab insere um caractere de tabulação em um <textarea> campo.

Aqui está um:.Uau!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top