Como fazer com que a tag de entrada HTML aceite apenas valores numéricos?

143

Eu preciso ter certeza de que um determinado <input>campo tenha apenas números como valor. A entrada não faz parte de um formulário. Portanto, ele não é enviado, portanto, validar durante o envio não é uma opção. Desejo que o usuário não consiga digitar caracteres que não sejam números.

Existe uma maneira legal de conseguir isso?

html input numbers validating Chiel ten Brinke
fonte
stackoverflow.com/questions/469357/…
alexblum
2
Dê uma olhada neste [link] [1], que possui informações suficientes. [1]: stackoverflow.com/questions/469357/…
Maheshkumar
Este pode também vir a calhar: stackoverflow.com/questions/995183/...
Chiel ten Brinke
Possível duplicação da entrada de texto HTML permite apenas entrada numérica
emkey08

Respostas:

282

HTML 5

Você pode usar o número do tipo de entrada HTML5 para restringir apenas as entradas numéricas:

<input type="number" name="someid" />

Isso funcionará apenas no navegador de reclamações HTML5. Verifique se o doctype do seu documento html é:

<!DOCTYPE html>

Consulte também https://github.com/jonstipe/number-polyfill para obter suporte transparente em navegadores mais antigos.

Javascript

Atualização: Existe uma solução nova e muito simples para isso:

Ele permite que você use qualquer tipo de filtro de entrada em um texto <input>, incluindo vários filtros numéricos. Isso manipulará corretamente Copiar + Colar, Arrastar e Soltar, atalhos de teclado, operações do menu de contexto, teclas não digitáveis ​​e todos os layouts de teclado.

Veja esta resposta ou tente você mesmo no JSFiddle .

Para fins gerais, você pode ter a validação JS como abaixo:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Se você deseja permitir decimais, substitua a "condição se" por esta:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Fonte: a entrada de texto HTML permite apenas entrada numérica

Demonstração do JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

Viral Patel
fonte
6
Sim, isso funciona para mim no Firefox e no Chrome. Estranho que js seja necessário para uma coisa tão simples.
Chiel ten Brinke
7
Não funciona no chrome 30. Não tenho nenhum problema em digitar letras na entrada "número" no violino. Hmmm ...
Ben
2
E se alguém quiser inserir valores flutuantes como 8,9?
syed shah
6
Para uma solução mais robusta, considere também que copiar e colar pode adicionar letras a este exemplo!
Neil
3
Opa !! a primeira linha deve ser alterada para:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F. 17/07
33

Você também pode usar o atributo padrão em html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Tutorial de validação de entrada

Embora seu doctype não seja html, acho que você precisará usar javascript / jquery.

martincarlin87
fonte
3
Embora o Firefox tenha uma borda vermelha na caixa de entrada quando não forem digitados números, no Firefox e no Chrome, você poderá digitar caracteres não numéricos na caixa de entrada.
Chiel ten Brinke
que tipo de documento você está usando na sua página?
martincarlin87
ok, talvez não seja suportado nas versões do navegador que você possui? Não 100% de certeza, mas para ser honesto eu usaria algumas js para validar aswell, eu não confiar exclusivamente em HTML5 no momento
martincarlin87
7
a propriedade permite inserir números, mas não enviar o formulário.
my1
1
ENVIE SOMENTE A VALIDAÇÃO!
Eric Hodonsky
16

Código Rápido e Fácil

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Isso permitirá o uso de números e backspace apenas.

Se você também precisar de parte decimal, use este fragmento de código

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
abhijithvijayan
fonte
13

Por favor, tente este código junto com o próprio campo de entrada

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

funcionará bem.

subindas pm
fonte
como excluir backspace então?
Aug3
7

Você pode usar um <input type="number" />. Isso permitirá que apenas números sejam inseridos na caixa de entrada.

Exemplo: http://jsfiddle.net/SPqY3/

Observe que a type="number"tag de entrada é suportada apenas em navegadores mais recentes.

Para o firefox, você pode validar a entrada usando javascript:

http://jsfiddle.net/VmtF5/

Atualização 2018-03-12: O suporte ao navegador é muito melhor agora, com o seguinte suporte:

  • Chrome 6 ou superior
  • Firefox 29 ou superior
  • Opera 10.1+
  • Safari 5+
  • Beira
  • (Internet Explorer 10 ou superior)
starbeamrainbowlabs
fonte
1
Parece funcionar muito bem no chrome, mas não no firefox.
Chiel ten Brinke 19/12/12
Ah Isso ocorre porque o Firefox não suporta o tipo de entrada = número. Como alternativa, você pode usar algum javascript para validar a entrada conforme o usuário insere o texto. Resposta atualizada.
amigos estão dizendo sobre casa da vovó
O jscript em jsfiddle.net/VmtF5 também não funcionará. Mesmo se um dígito estiver no início do caractere, a validação falhará. Tente você mesmo em jsFiddle
Akshay
@aarn Funciona para mim (consulte i.imgur.com/AWdmEov.png ), que navegador você está usando?
Starbeamrainbowlabs
@starbeamrainbowlabs Estou usando o Firefox. Além disso, digite 6abc, não vai mostrar-lhe o erro
Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

e nos js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

ou você pode escrevê-lo de uma maneira complicada, mas útil:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Nota : entre navegadores e regex em literal.

Fredrick Gauss
fonte
como você adicionaria a capacidade de inserir entradas como 0,5 ou 0,3?
user3591637
Então você deve considerar o primeiro e o segundo caracteres ( 0.43ou .43) que podem ser feitos com a verificação do valor da entrada atual mais a tecla pressionada. Isso seria feio no código de uma linha, eu recomendo usar uma função para isso. Para testar um número inteiro ou flutuar, verifique aqui .
Fredrick Gauss
1
você não pode excluir um número digitado por engano #
Chris Sim
5

Eu usei expressão regular para substituir o valor de entrada pelo padrão necessário.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Expandir snippet

Shaktish
fonte
1
É por isso que eu amo regex. Obrigado, cara, você realmente salvou meu dia
Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup dispara quando a chave é liberada.

isNaN(parseFloat(value))? verifica se o valor de entrada não é um número.

Se não for um número, o valor será definido como 1000 :Se for um número, o valor será definido como o valor.

Nota: Por alguma razão, ele funciona apenas comtype="number"

Para torná-lo ainda mais emocionante, você também pode ter um limite:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

Aproveitar!

user40521
fonte
4

Eu briguei com este por um tempo. Muitas soluções aqui e em outros lugares pareciam complicadas. Esta solução usa jQuery / javascript ao lado de HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

No meu caso, eu estava rastreando pequenas quantidades com um valor mínimo de 1, portanto, o min = "1" na tag de entrada e abc = 1 na verificação isNaN (). Para números apenas positivos, você pode alterar esses valores para 0 e até mesmo remover o valor mínimo = "1" da tag de entrada para permitir números negativos.

Além disso, isso funciona para várias caixas (e pode poupar algum tempo de carregamento ao fazê-las individualmente por ID); basta adicionar a classe "validateNumber", quando necessário.

Explicação

parseInt () basicamente faz o que você precisa, exceto pelo fato de retornar NaN em vez de algum valor inteiro. Com um simples if (), você pode definir o valor "fallback" preferido em todos os casos em que o NaN é retornado :-). O W3 também declara aqui que a versão global do NaN digitará conversão antes da verificação, o que fornece algumas provas extras (Number.isNaN () não faz isso). Quaisquer valores enviados para um servidor / back-end ainda devem ser validados lá!

Isaías
fonte
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Expandir snippet

JSFiddle: https://jsfiddle.net/ug8pvysc/

Sameh Saeed
fonte
1
Quando você cola um valor que contenha texto, ele permite
317 Chris Sim
1
Também permite caracteres especiais. Por exemplo: á, ã, ê, ó, è etc.
AlmostPitt
3

se você pode usar HTML5, você pode fazê-lo. <input type="number" /> Caso contrário, será necessário fazê-lo através de javascript, pois você disse que não é enviado para fazê-lo a partir do código de trás.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

O PS não testou o código, mas deve estar mais ou menos correto, se não verificar erros de digitação: D Você pode adicionar mais algumas coisas, como o que fazer se a string for nula ou vazia, etc. Além disso, você pode tornar isso mais rápido: D

czioutas
fonte
2

se não for um conjunto inteiro 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
websky
fonte
2

A resposta aceita:

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

É bom, mas não perfeito. Funciona para mim, mas recebo um aviso de que a instrução if pode ser simplificada.

Então fica assim, que é bem mais bonito:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

Comentaria a postagem original, mas minha reputação é muito baixa para fazer isso (criei esta conta).

Chris H.
fonte
2

Você pode usar a <input>tag com o atributo type = 'number'.

Por exemplo, você pode usar <input type='number' />

Este campo de entrada permite apenas valores numéricos. Você também pode especificar o valor mínimo e o valor máximo que devem ser aceitos por esse campo.

Geeth Chadalawada
fonte
2

Por favor, veja meu projeto do filtro de navegador do valor do elemento de entrada de texto em sua página da Web usando a linguagem JavaScript: Filtro de Chave de Entrada . Você pode filtrar o valor como um número inteiro, um número flutuante ou escrever um filtro personalizado, como um filtro de número de telefone. Veja um exemplo de código de entrada com um número inteiro:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Expandir snippet

Veja também minha página "Campo inteiro:" do exemplo do filtro de chave de entrada

Andrej
fonte
2

Para fins gerais, você pode ter a validação JS como abaixo:

Funcionará no teclado numérico e nas teclas numéricas normais 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
YasirPoongadan
fonte
2

Adicione dentro da sua tag de entrada: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

Naveen Kumar
fonte
2
Bem-vindo ao SO! Infelizmente, essa é uma pergunta de 5 anos e meio que já tem uma resposta aceita. Você pode querer navegar perguntas sem respostas aqui: stackoverflow.com/unanswered
AndroidNoobie
2

Atualizei algumas respostas postadas para adicionar o seguinte:

  • Adicione o método como método de extensão
  • Permitir que apenas um ponto seja inserido

  • Especifique quantos números após o ponto decimal é permitido.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
Plexis Plexis
fonte
1

Eu uso isso para códigos postais, rápido e fácil.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
Justin Buser
fonte
1

Ao usar esse código, você não pode usar o "Botão BackSpace" no Mozilla Firefox, você só pode usar o backspace no Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "obrigatório>

Wendell Alvarez
fonte
0

É melhor adicionar "+" à condição REGEX para aceitar vários dígitos (não apenas um dígito):

<input type="text" name="your_field" pattern="[0-9]+">

Dashko Leonid
fonte
0

Uma maneira poderia ser ter uma matriz de códigos de caracteres permitidos e, em seguida, usar a Array.includesfunção para verificar se o caractere digitado é permitido.

Exemplo:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
MA1
fonte
0

Simples o suficiente?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Expandir snippet

Normajean
fonte