9

Estou criando um sistema no qual o usuário deve digitar em um input o nome da mãe com apenas caracteres alfanuméricos. Estou usando o código abaixo que está funcionando, porém percebi uma falha. Mesmo permitindo não digitar outros caracteres especiais, se o usuário copiar e colar outro caractere especial ele será inserido no input.

<input type="text" id="nomeMae">

$('#nomeMae').bind('keypress', function (event) 
{
   var regex = new RegExp("^[0-9a-zA-Z\b]+$");
   var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
   if (!regex.test(key)) 
   {
      event.preventDefault();
      return false;
   }
});
1
  • 4
    Mais agradável em termos de usabilidade é deixar colar livremente e remover depois apenas os caracteres que não servem para o campo. E aproveitar pra fazer o que todo mundo esquece depois de remover caracteres: deixar o cursor no lugar correto da nova string.
    – Largato
    Commented 7/01/2015 às 1:02

3 Respostas 3

2

Talvez seja frustrante para o usuário não ter a praticidade de colar uma palavra no input. Ou então conseguir colar mas o texto ser "cortado" pela metade (index 0 até a primeira ocorrência de um caractere inválido na string). Ou tornar o processo confuso ao ter os caracteres inválidos substituídos/removidos, por exemplo: jo@o após ser colado no input apareceria joo (provavelmente depois de umas três tentativas de colar o usuário perceberia que o problema é o caractere @).

Talvez uma solução melhor seja avisá-lo de que a entrada está errada. Partindo dessa solução, você pode definir o regex no atributo pattern do input:

<input class='nome-mae' type='text' pattern='^[ 0-9a-zA-Z\b]+$'/>

Bastará usar Javascript para verificar se o input é válido (:valid). Também poderia ser informada uma mensagem para ele saber o que foi feito de errado. Segue uma possível alternativa:

$(function(){
  $('.nome-mae').on('blur keydown keyup keypress paste', function(){
     setAlertMessage( $(this).is(':valid') ? 
         "" : 
         "Este campo não pode conter caracteres especiais.");
  });
               
  function setAlertMessage(message){
     $('.message').html(message);
  }
});
input {
  border: 2px solid #ccc;
  padding: 6px;
  width: 300px
}


/*
 * será aplicado automaticamente quando
 * o input for invalido */
input:invalid {
  box-shadow: none;
  border-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input class='nome-mae' type='text' pattern='^[ 0-9a-zA-Z\b]+$' placeholder='Nome da Mãe'/>
<p class='message'></p>

1

Você poderia vetar o usuário de cortar, copiar e colar nos campos do formulário.

O código a seguir mostra como fazer isto utilizando jQuery. Aqui um simples exemplo:

$(document).ready(function(){
  $('#txtInput').bind("cut copy paste",function(e) {
      e.preventDefault();
  });
});
2
  • fiddle: jsfiddle.net/zd5s60eL
    – Edi. Gomes
    Commented 6/01/2015 às 21:02
  • 1
    legal a sugestão! Eu particularmente não gosto quando o sistema me bloqueia pra colar. Se eu tiver o meu nome no ctrl+c, por exemplo, gostaria de poder colar o que tenho em memória. Commented 6/01/2015 às 21:16
1

Uma alternativa é, como já disseram, impedir o usuário de colar. Outra seria usar um código que verifica se há algum caractere inválido no texto colado e, caso haja, limpar o input, como o seguinte:

$('#nomeMae').on('paste', function(e) {
    var regex = new RegExp("^[ 0-9a-zA-Z\b]+$");
    var _this = this;
    // Curta pausa para esperar colar para completar
    setTimeout( function(){
        var texto = $(_this).val();
        if(!regex.test(texto))
        {             
            $(_this).val("")
        }
    }, 100);
});

O código foi feito baseado nessa resposta.

Obs: Alterei sua expressão, porque ela impede o usuário de digitar espaços (considerei que seria o nome completo, se não for o caso, é só usar a expressão original mesmo).

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 .