How to block double character input in "onkeydown" event

Question

I was trying to make a simple and small code to validate input of the kind text. For this I used an event onkeydown in the input where it returns false or true, ex: onkeydown="return somenteLetras()"; in the Javascript code, when triggering this function, it captures the keycode of the typed key and, depending on its code, it returns false or true allowing only letters to return true, at least in theory. The problem was when I realized that even if a key is locked, it allows its entry since before the locked key is typed a accent, for example: if in the function I only allow the letter to enter a, me type b, the keycode will be different and then it will lock the letter entry b, but if I type any accent before then type b, it blocks the accent but allows entry of the b.

Follow the code to understand better:

HTML

<input type="text" onkeydown="return letraA()">

JS

function letraA() {
   var kc = event.which || event.KeyCode;
   if(kc == 65) {
       return true;
   }
   return false;
}

In this code he only allows the letter a, but if you press the button ´ and then a b, for example, instead of him blocking ´b it just blocks the accent and let the b. I wish I knew how to fix this.

Answer 1

I don’t know if this will help you, but if you just need to sanitize (and not prevent being typed), you can use another way to do this.

First switch from keydown to keyup, so the function will be executed when the key is "loose".

Then use the function .replace() to remove all characters you do not want.

Thus remaining..

<script>
    window.onload = function()
    {
        document.getElementById('input-a').addEventListener('keyup', function(e)
        {
            this.value = this.value.replace(/[^Aa]/g, '');
        });
    };
</script>
<input type="text" id='input-a'>

If you only want letters and space, just adapt your regular expression.

<script>
    window.onload = function()
    {
        document.getElementById('input-a').addEventListener('keyup', function(e)
        {
            this.value = this.value.replace(/[^A-Za-z ]/g, '');
        });
    };
</script>
<input type="text" id='input-a'>

It is easier to remove what was typed than to try to block keys in this way.

window.onload indicates that the code will be executed as soon as the window is loaded, it is equivalent to $(document).ready() jQuery.

Note that if you are working with a server, never discard server-side validation, which is extremely important, because any client-side validation can be circumvented.

Answer 2

Use the oninput event, which occurs when an element receives user input.

This event occurs when the value of an element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements.

<input type="text" id="input-a"/>
<script>
    window.onload = function()
    {
        document.getElementById('input-a').addEventListener('input', function()
        {
            this.value = this.value.replace(/[^A-Za-z ]/g, '');
        });
    }
</script>