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.
A classe pode ser adicionada com outras também
<input
type="text"class
="number"
/>
Pros: Fácil de fazer, tem uma boa mensagem de retorno.
type="text"
<input
class
="meuInputBonito number"
/>
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"
Lembrando que não é todo navegador que suporta type="number" do HTML5
type="number"
<input
/>
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:
Postar um comentário