Capturando tecla TAB na caixa de texto

votos
78

Eu gostaria de ser capaz de usar a Tabchave dentro da caixa de um texto para a guia ao longo de 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 bolhas até a interface do usuário?

Eu entendo alguns navegadores (ie Firefox) não pode permitir isso. Como cerca de um costume-chave de combinação como Shift+ Tabou Ctrl+ Q?

Publicado 06/08/2008 em 14:27
fonte usuário
Em outras línguas...                            


6 respostas

votos
86

Mesmo se você capturar o evento keydown / keyup, esses são os únicos eventos que os fogos tecla TAB, você ainda precisa de alguma maneira para impedir a ação padrão, movendo-se 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 o manipulador de eventos. No IE, você tem que retornar falso do identificador de evento. A biblioteca jQuery fornece um método preventDefault 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>
Respondeu 16/08/2008 em 14:55
fonte usuário

votos
17

Eu prefiro guia recuo não funcionar do que quebrar tabulação entre os itens do formulário.

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

Em termos de realmente parar a ação, jQuery (que estouro de pilha usa) vai parar um evento a partir borbulhando quando você retornar false de um callback evento. Isto torna a vida mais fácil para trabalhar com vários navegadores.

Respondeu 06/08/2008 em 14:36
fonte usuário

votos
10

A resposta anterior é bom, mas eu sou um daqueles caras isso é firmemente contra misturando comportamento com apresentação (colocando JavaScript no meu HTML) para que eu prefiro colocar minha manipulação de eventos lógica em meus arquivos JavaScript. Além disso, nem todos os navegadores implementar 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
  }
}
Respondeu 06/08/2008 em 14:35
fonte usuário

votos
4

Gostaria de aconselhar contra a mudar o comportamento padrão de uma chave. I fazer, tanto quanto possível sem tocar um mouse, por isso, se você faz meu tecla TAB não mover para o próximo campo em um formulário I será muito agravada.

A tecla de atalho pode ser útil no entanto, especialmente com grandes blocos de código e de nidificação. Shift-TAB é uma má opção, pois que normalmente leva-me 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, seria possível?

Respondeu 06/08/2008 em 14:36
fonte usuário

votos
3

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 irá atualizar o código

Respondeu 09/09/2010 em 07:14
fonte usuário

votos
1

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

Aqui está um: . Wee!

Respondeu 17/02/2010 em 11:55
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more