2

Queria uma máscara para uma caixa de texto em que o utilizador apenas consegue inserir letras e letras com acentos.

O código que consegui encontrar apenas deixa inserir letras sem acentos.

function lettersOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
    if (charCode == 32)
        return true;
    if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
        return false;
    }
    else
        return true;
}

A variável evt é a letra premida ou seja, na textbox estou a usar a propriedade onkeypress="return lettersOnly(event)".

1

3 Respostas 3

1

Você pode usar este plugin imaskjs

var regExpMask = IMask(
  document.getElementById('regexp-mask'),
  {
    mask: /^[a-zöüóőúéáàűíÖÜÓŐÚÉÁÀŰÍçÇ]{0,100}$/
  });
<script src="https://unpkg.com/imask"></script>
<input type="text" value="" id="regexp-mask">

1

Basta um simples .test com uma regex e um flag i (de case insensitive, tanto faz maiúsculas ou minúsculas):

function lettersOnly(evt) {
   if(!/[a-záéíóúàèìòùãõâêîôûäëïöüç]/i.test(evt.key)) return false;
}
<input type="text" onKeyPress="return lettersOnly(event)">

A regex irá validar todas as letras de a a z (maiúsculas ou minúsculas) e todas as letras acentuadas áéíóúàèìòùãõâêîôûäëïöüç (maiúsculas ou minúsculas).

1

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.

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 .