JQuery: Bloquear a tecla TAB

Em alguns casos temos a necessidade de bloquear algumas teclas para evitar maiores problemas. E foi isso que aconteceu, tive a necessidade de bloquear a tecla TAB em um sistema que estava desenvolvendo.

Compartilho, abaixo, a solução que resolveu o meu problema.

Antes do código, uma pequena explicação:

Eventos que ocorrem quando o usuário pressiona uma tecla no teclado, pertencem ao objeto KeyboardEvent.

Sabendo que cada tecla pressionada no teclado tem um código (Unicode), só precisei identificá-lo para desenvolver o script.

Dentre as propriedades do KeyboardEvent que retornam o código estão o which, o charCode e o keyCode.

Cada uma dessas propriedades tem uma particularidade para funcionar com algumas versões dos navegadores. Para evitar problemas de incompatibilidade, foi criado um script cross-browser.

Confira:

<script>
    $(function(){
        $("input").on("keydown", function (e) {
           // use which ou charCode ou e.keyCode, dependendo do navegador
            var key = e.which || e.charCode || e.keyCode;
            // 9 é o caracter Unicode da tecla TAB
            if (key === 9) {
                if (e.preventDefault) {
                    e.preventDefault();
                }
                return false;
            }
        });
    });
</script>

Para testar, coloque o cursor do mouse dentro do campo 1, pressione a tecla TAB e verá que o cursor continuará no campo 1.

<p>Campo 1:</p>
<input type="text" name="campo1" value="">
<br><br>
<p>Campo 2:</p>
<input type="text" name="campo2" value="">

Espero que tenha gostado. Até a próxima!