0

Eu estava tentando fazer um código simples e pequeno para validar input do tipo text. Para isso eu usei um evento onkeydown no input onde ele retorna falso ou verdadeiro, ex: onkeydown="return somenteLetras()"; no código de JavaScript, ao acionar essa função, ele captura o keycode da tecla digitada e, dependendo do código dela, ele retorna falso ou verdadeiro permitindo que somente letras retornem verdadeiro, pelo menos na teoria. O problema foi quando percebi que mesmo que uma tecla seja bloqueada, ele permite a entrada dela desde que antes da tecla bloqueada seja digitado um acento, por exemplo: se na função eu só permitir a entrada da letra a, eu digitar b, o keycode será diferente e então ele irá bloquear a entrada da letra b, porém se eu digitar qualquer acento antes de depois digitar b, ele bloqueia o acento mas permite a entrada do b.

Segue o código para entenderem melhor:

HTML

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

JS

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

Nesse código ele só permite a letra a, mas se você apertar a tecla ´ e depois um b, por exemplo, em vez de ele bloquear ´b ele só bloqueia o acento e deixar passar o b. Queria saber como resolver isso.

2 Respostas 2

0

Não sei se isso vai lhe ajudar, porém se você precisa apenas sanitizar (e não prevenir de ser digitado), pode utilizar uma outra forma para fazer isso.

Primeiro mude de keydown para keyup, assim a função será executada quando a tecla for "solta".

Em seguida, utilize a função .replace() para remover todos os caracteres que não deseja.

Ficando assim..

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

Caso queira somente letras e espaço, basta adaptar a sua expressão regular.

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

É mais fácil remover o que foi digitado do que tentar bloquear teclas desta forma.

window.onload indica que o código será executado assim que a janela for carregada, é equivalente ao $(document).ready() do jQuery.

Vale lembrar que caso esteja trabalhando com um servidor, nunca descarte a validação do lado do servidor, que é de extrema importância, pois qualquer validação do lado do cliente pode ser burlada.

1
  • Infelizmente eu gostaria de validar os caracteres antes deles entrarem no input para não ficar aquele aparece e some letras, para ficar esteticamente mais bonito, eu já tentei usar o evento keypress também, ele resolveu o meu problema mas ele não capta qualquer botão do teclado como o backspace, por isso precisava sanar esse problema através do keydown mesmo, mas agradeço mesmo assim
    – Matheus
    26/05/2017 às 23:30
0

Use o evento oninput, que ocorre quando um elemento recebe entrada do usuário.

Este evento ocorre quando o valor de um ou elemento é alterado.

Dica: Este evento é semelhante ao onchange evento. A diferença é que o evento oninput ocorre imediatamente após o valor de um elemento mudou, enquanto onchange ocorre quando o elemento perde o foco, depois que o conteúdo foi alterado. A outra diferença é que o evento onchange também funciona em elementos.

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

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 .