Capturando tecla TAB na caixa de texto [fechado]

100

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

Existe algum JavaScript que irá capturar a tecla Tab na caixa de texto antes de aparecer na IU?

Eu entendo que alguns navegadores (ou seja, FireFox) podem não permitir isso. Que tal uma combinação de teclas personalizada como Shift+ Tabou Ctrl+ Q?

javascript user-interface

— Seibar
fonte

Não se esqueça de verificar a janela em foco e deixe-a borbulhar normalmente se você não estiver na área de texto do editor.

— FlySwat

Esta postagem foi sinalizada pelo moderador como "pertence a meta.stackoverflow.com", mas já tem mais de dois anos, então não a estou migrando.

— Robert Harvey

108

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

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

— ScottKoon
fonte

1

Acabei de corrigir a linha 4, de "if (el.attachEvent)" para "if (myInput.attachEvent)"

— Fenton

Observe que este código adiciona TAB apenas no final. É inconveniente na maioria das ocasiões.

— Alexander Palamarchuk

@SteveFenton Existe uma maneira simples de remover os espaços novamente keycode 8?

— Yckart

18

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 inserir o 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) interromperá o borbulhamento de um evento quando você retornar false de um retorno de chamada de evento. Isso torna a vida mais fácil para trabalhar com vários navegadores.

— Lauren
fonte

13

A resposta anterior é boa, mas eu 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 tratamento de eventos em meus arquivos JavaScript. Além disso, nem todos os navegadores implementam 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
  }
}

— Tom
fonte

6

Aconselho a não 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 minha tecla tab não mover para o próximo campo em um formulário, eu ficarei muito irritado.

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

— Wally Lawless
fonte

1

A questão depende inteiramente do aplicativo. Estou trabalhando em um controle de editor de código. Não forneci uma tecla tab e todos os meus alunos reclamaram. Não o fiz porque não queria quebrar a acessibilidade do meu aluno que era cego. Agora adicionei suporte para guias, mas também forneci uma opção de preferência do usuário para desligá-lo.

— Charles,

@Charles muito bom ponto sobre as implicações de acessibilidade.

— Wally Lawless,

4

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

— chintan123
fonte

3

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

Aqui está um: . Wee!

— Paul D. Waite
fonte