Loading
PauloHDSousa - Desenvolvedor, Leitor e jogador: Web - Textbox permitindo somente números

sexta-feira, 11 de abril de 2014

Web - Textbox permitindo somente números

Existem vários modos de  forçar o usuário a preencher um textbox/input type="text" apenas com números, vou listar aqui alguns modos que podem ser usados conforme a sua situação.

Aceitando somente números Jquery validator

 

Para utilizar o Jquery validator para forçar o usuário a preencher apenas números você vai precisar ter o Jquery e o Jquery validator na sua pagina.

Depois basta fazer adicionar a classe number no input que o usuário vai ser obrigado a inputar apenas números.

<input type="text"  class="number" />
 A classe pode ser adicionada com outras também

<input type="text"  class="meuInputBonito number" /> 
Pros: Fácil de fazer, tem uma boa mensagem de retorno.
Contras:É necessário ter Jquery e JqueryValidator.

 Jquery: http://jquery.com/
Jquery Validator: http://jqueryvalidation.org/


Aceitando apenas números com HTML5

 

Basta adicionar type="number"

<input type="number" />
Lembrando que não é todo navegador que suporta type="number" do HTML5

Pros: Fácil de fazer e ainda tem uma mensagem de retorno sem contar que é HTML puro.
Contras:Não funciona em todos os navegadores.

Table de compatibilidade:http://caniuse.com/input-number
Exemplo do type="number": http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number




Permitir apenas números com Javascript (Regex)

 

<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Pros: Javascript puro.
Contras:Não da um bom retorno do que está acontecendo para o usuário.


Permitir apenas números com Javascript (Tabela ASCII)

 

Esse é o famoso, fazendo na mão, a cada vez que uma tecla for pressionada um código JS vai rodar e verificar se a tecla presssionada é um número

<input type="text" onkeyup="return apenasNumero(event)" />


function apenasNumero(evt) {
  var codigo = (evt.which) ? evt.which : event.keyCode
  if (codigo > 31 && (codigo < 48 || codigo > 57))
     return false;

  return true;
}


Pros: Relativamente fácil de fazer e tem a vantagem de se o usuário digitar uma letra você pode dar o retorno do modo que achar mais conveniente.
Contras:É necessário escrever algumas linhas de código.

Nenhum comentário: