1

Como interceptar e cancelar tecla pressionada no IE e firefox? Estou tentando javascript puro mas se não tiver jeito pode ser JQuery.
Usei o código abaixo mas só funcionou no chrome:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Teste interceptar tecla</title> </head> <body> <input id="teste" type="text" permitidos="123" onkeypress="tratarPreenchimento(this,event)"/> <input type="text" /> <script> function tratarPreenchimento(campo,e) { if (isCaracterPermitido(campo,e) === false) { e.returnValue = false; } } function isCaracterPermitido(campo, e) { var permitidos = campo.getAttribute('permitidos'); if(permitidos) { if (permitidos.indexOf(String.fromCharCode(e.keyCode).toString()) >= 0) { return true; } else { return false; } } else return true; } </script> </body> Achei uma forma: No html: onkeypress="return numbersOnly(this, event);"
No JS: function numbersOnly(oToCheckField, oKeyEvent) { return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode)); }

Mas na verdade queria usar isso em um eventlistener de todos os inputs, não funciona nesse código abaixo:

``` Teste interceptação keypress

<script>
    (function(){
        var inputs = document.querySelectorAll('[type*="text');
        for (var i = 0;i< inputs.length;++i) {
            inputs[i].addEventListener("keypress",tratarKeypress);
        }
        function tratarKeypress(e){
            console.log('Interceptado');
            return e.charCode === 0 || /\d/.test(String.fromCharCode(e.charCode));
        }
    })();

</script>

```

2
  • 1
    Não tem relação com a pergunta, mas deixo aqui uma pergunta sobre criar atributos que não existem, e.g: permitidos. Se quer criar atributos customizados, use data-attributes. 1/03/2016 às 19:39
  • @renan, valeu, vou dar uma lida. 1/03/2016 às 19:44

2 Respostas 2

1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Teste interceptar tecla</title>
    </head>
    <body>
        <input id="teste" type="text" permitidos="123" onkeyup="tratarPreenchimento(this,event)"/>
        <script>
            function tratarPreenchimento(a,evento) {
                if(evento.keyCode != 49 && evento.keyCode != 50 && evento.keyCode != 51){
                    a.value = null;
                }
            }
        </script>
    </body>
</html>

            function tratarPreenchimento(a,evento) {
                if(evento.keyCode != 49 && evento.keyCode != 50 && evento.keyCode != 51){
                    a.value = null;
                }
            }
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Teste interceptar tecla</title>
    </head>
    <body>
        <input id="teste" type="text" permitidos="123" onkeyup="tratarPreenchimento(this,event)"/>
    </body>
</html>

**Tente isso o Problema é que se escrever um carácter errado após os certos ele apaga tudo **

5
  • Oi Adriano! Podes explicar melhor a resposta?
    – Sergio
    1/03/2016 às 20:21
  • Então, troquei o onkeypress por onkeyup e apago o input se for digitado alguma tecla diferente de 1,2,3 os keycodes respectivos são (49,50,51) o pagar é atribuir nulo. Entendeu? 1/03/2016 às 20:24
  • Os keycodes se você estiver usando o teclado de números em cima das letras não ao lado, porque os ao lado tem keycodes diferentes, eu acho. 1/03/2016 às 20:25
  • Podes editar a resposta e juntar aí a explicação. Assim outros que vierem vão perceber melhor a tua ideia. Também podias usar e.preventDefault();.
    – Sergio
    1/03/2016 às 20:46
  • @AdrianoCruzdeOliveira, valeu cara, da uma olhada na edição que fiz, achei uma forma interessante, porém não funcionou num listener de todos os inputs que é o que realmente preciso, vacilei em não colocar desde o começo, quis simplificar o problema e solucionou no simples mas não no real. 1/03/2016 às 22:06
1

Consegui resolver dessa forma:

(function () {
    document.onkeypress = function (e) {
        //Código para retornar true ou false;
    };
})();

Testei no Chrome, Opera, IE e Firefox.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .