Apenas para atualizar as outras respostas, segundo a MDN, atualmente o evento keypress
está deprecated e seu uso não é mais recomendado:
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Tanto que o W3C atualmente lista este evento na seção "Legacy KeyboardEvent events". Inclusive, lá menciona que ele foi substituído por beforeinput
e input
. Então uma versão mais atualizada ficaria assim:
// qualquer caractere que não seja letra
const regexNaoLetras = /[^a-záéíóúàèìòùãõâêîôûäëïöüç]/ig;
function verify(e) {
e.target.value = e.target.value.replace(regexNaoLetras, '');
}
document.querySelector('#mask').addEventListener('input', verify);
<input type="text" value="" id="mask">
Além disso, o evento input
também trata de casos que keypress
não consegue lidar, como por exemplo se você fizer Ctrl+V no campo. Ex: vamos supor que o valor atual do campo é "abc". Você copia (Ctrl+C) um número (como 123
) de outro lugar e cola (Ctrl+V) no campo. O evento keypress
não consegue detectar isso e os números não são removidos (o valor do campo fica como "abc123"). Já o evento input
detecta esta alteração e o seu respectivo listener é disparado.
Dentro do listener removemos os caracteres que não são letras (repare no ^
logo depois do [
, isso faz com que a regex considere os caracteres que não estão na lista, ou seja, é qualquer coisa que não seja uma letra). A regex tem as flags i
(case insensitive, assim pega tanto letras maiúsculas quanto minúsculas) e g
(global, que faz com que todas as ocorrências sejam substituídas).
Fiz desta forma, removendo todos os caracteres que não são letras, pois isto já cobre casos diferentes de uma digitação "normal", como por exemplo um Ctrl+V que pode adicionar vários caracteres de uma vez.