How to intercept and cancel pressed key in IE and firefox

Asked

Viewed 123 times

1

How to intercept and cancel pressed key in IE and firefox? I’m trying to javascript pure but if there is no way can be JQuery.
I used the code below but it only worked on 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> I found a way: In html: onkeypress="return numbersOnly(this, event);"
In the JS: function numbersOnly(oToCheckField, oKeyEvent) { return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode)); }

But I actually wanted to use it on a eventlistener of all inputs, does not work in this code below:

``` Test keypress interception 

<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>

```

javascript jquery
  • 1

    It’s not related to the question, but I’ll leave it here a question on creating attributes that do not exist, e.g: permitidos. If you want to create custom attributes, use data-Attributes.

  • @Renan, thanks, I’m gonna read.

2 answers

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>

**Try this the Problem is that if you write a wrong character after the right ones it erases everything **

  • Hi Adriano! You can explain the answer better?

  • Then, I switched the onkeypress for onkeyup and delete the input if any key other than 1,2,3 the respective keycodes are (49,50,51) the pay is assign null. Got it?

  • The keycodes if you are using the numbers keyboard on top of the letters not next to, because the next ones have different keycodes, I think.

  • You can [Dit] the answer and add the explanation there. So others who come will understand better your idea. You could also use e.preventDefault();.

  • @Adrianocruzdeoliveira, thanks man, from a look at the edition I made, I found an interesting way, but it didn’t work in a System of all inputs that is what I really need, I hesitated in not putting from the beginning, wanted to simplify the problem and solved in simple but not in real.

1

I managed to solve it that way: 

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

I tested in Chrome, Opera, IE and Firefox.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.