HTML5: número de tipo de entrada que usa apenas números inteiros?

249

Estou usando o jQuery Tools Validator, que implementa validações HTML5 através do jQuery. Tem funcionado muito bem até agora, exceto por uma coisa. Na especificação HTML5, o tipo de entrada "número" pode ter números inteiros e números de ponto flutuante. Isso parece incrivelmente míope, pois só será um validador útil quando os campos do banco de dados tiverem números de ponto flutuante assinados (para entradas não assinadas, você precisará voltar à validação "padrão" e, assim, perder recursos extras, como cima e para baixo setas para navegadores compatíveis). Existe outro tipo de entrada ou talvez um atributo que restrinja a entrada a números inteiros não assinados? Não encontrei nada, obrigado.

EDITAR

Ok, pessoal, eu aprecio seu tempo e ajuda, mas vejo muitas votações não merecidas acontecendo: D. Definir a etapa como 1 não é a resposta, pois não restringe a entrada. Você ainda pode digitar um número de ponto flutuante negativo na caixa de texto. Além disso, estou ciente da validação de padrões (mencionei isso no meu post original), mas isso não fazia parte da pergunta. Eu queria saber se o HTML5 permitiu restringir uma entrada do tipo "número" a valores inteiros positivos. Para essa pergunta, a resposta, ao que parece, seria "não, não". Eu não queria usar a validação de padrão porque isso causa algumas desvantagens ao usar a validação do jQuery Tools, mas agora parece que a especificação não permite uma maneira mais limpa de fazer isso.

jquery html validation jquery-tools JayPea
fonte
3
A partir de 2019 - não sei desde quando - a numberentrada (pelo menos no FF / Chrome / Safari) agora só aceita números inteiros por padrão, a menos que você defina um valor explícito para o stepattr que permita valores decimais; por exemplo: step="0.01". MDN documentado aqui . Em duas mentes sobre isso, porque eu acho que é um padrão sensato, mas também uma mudança radical (sim, isso afetou algum código que escrevi).
Darragh Enright

Respostas:

326

https://www.w3.org/wiki/HTML/Elements/input/number

O melhor que você pode alcançar apenas com HTML

<input type="number" min="0" step="1"/>
Expandir snippet

Aurélien Ooms
fonte
6
Você provavelmente deve definir mina 1como ele quer números positivos (e números não não negativos).
Martin Thoma 15/05
1
@pwdst eu vou segundo isso. <input type="number" min="0" step="1"/>é a resposta mais correta para a pergunta. Enfim, qual é o sentido de ter os dois step="1"e pattern="\d+"? Não consigo digitar números de ponto flutuante nos dois casos.
Danish Ashfaq
27
Isso não funcionou para mim na versão mais recente do chrome. Não permite que as letras sejam digitadas, mas permite que caracteres especiais sejam inseridos.
Malavos
2
Por que eu posso digitar e
conceda dom
4
@grantsun para números exponenciais, por exemplo, 10e20.
sn3ll
181

Defina o stepatributo para 1:

<input type="number" step="1" />

Isso parece um pouco problemático no Chrome agora, então pode não ser a melhor solução no momento.

Uma solução melhor é usar o patternatributo, que usa uma expressão regular para corresponder à entrada:

<input type="text" pattern="\d*" />

\dé a expressão regular de um número, *significa que ele aceita mais de um deles. Aqui está a demonstração: http://jsfiddle.net/b8NrE/1/

js-coder
fonte
2
Como JayPea aprendeu, nem todos os navegadores ainda suportam todos os elementos HTML5, por isso é melhor fornecer uma degradação suave, como você propôs.
DOK
6
A validação @Zut HTML5 não impede que você insira essas chaves. Isso apenas impede que o formulário seja enviado com esses caracteres. Se você enviar um formulário com uma entrada do tipo numberque contém outros caracteres, o Chrome exibirá uma mensagem de erro.
JS-codificador
2
@ dotweb - Entendo o seu ponto. A diferença entre os dois é que, com o atributo numérico, todos os caracteres alfabéticos são removidos automaticamente quando desmarco (desfoque do gatilho) da entrada. Isso não acontece ao usar o atributo padrão. Acho que essa distinção é importante apenas se você estiver usando o AJAX para postar seus dados e estiver usando outro evento que não submitseja o de acionar a postagem.
Zut
6
Isso não faz o que o OP pediu. Somente números inteiros /\d*/.test(1.1) // true
vsync
2
@vsync pattern="\d*"não é o mesmo que /\d*/, pattern="\d*"é igual a /^(?:\d*)$/, por favor consulte o HTML5 padrão documentação atributo .
Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Usando esse código, a entrada no campo de texto limita a digitação de apenas dígitos. Padrão é o novo atributo disponível no HTML 5.

Doc do atributo padrão

thejustv
fonte
9
De acordo com a especificação, o atributo padrão pode ser usado apenas onde o tipo de entrada é Texto, Pesquisa, URL, Telefone, E-mail, Senha (como mostrado aqui com o tipo "Texto"). Isso significa que a semântica do tipo de entrada numérica e, portanto (importante) os teclados numéricos na tela de alguns tablets e telefones é perdida ao usar esse método.
pwdst 27/06
3
Isso no firefox 36.0 permite digitar letras e caracteres especiais.
Malavos
1
Não limita a entrada apenas a números, você ainda pode digitar letras!
HadidAli
35

A maneira mais fácil usando JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
fonte
Eu não entendoreplace(/(\..*)\./g, '$1')
codyc4321
3
É importante aceitar números flutuantes e repetir .apenas uma vez, por exemplo, 123.556pode ser gravado.
Tarek Kalaji
8
@TarekKalaji - perguntas afirma inteiros e não flutuar números
vsync
e o dispositivo móvel? porque o tipo de texto exibir todos os teclados (chars Alfanumeric também)
Nuri YILMAZ
27

O padrão é bom, mas se você deseja restringir a entrada para números apenas com type = "text", pode usar oninput e um regex como abaixo:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Eu esquenta para mim :)

Viktor Karpyuk
fonte
Lembre-se de que essa abordagem pode negar seu método (alterar) (manipulador de eventos) e também apagar seu valor padrão na caixa de entrada.
HadidAli
14

Isto não é apenas para html5, todo o navegador está funcionando bem. tente isso 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
fonte
12
Isto é mau. Na entrada, tente: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Utilize oninputvez
zanderwar
1
Quando esta resposta foi escrita, o HTML5 não foi publicado. @zanderwar
Muhammet Can TONBUL
11

Os padrões são sempre preferíveis à restrição, tente oninpute minocorra 1 para inserir apenas números de 1 em diante

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
fonte
É uma solução muito instresting. O que é para `value = $ {var}`?
Desenvolvedor
Valor @AcademyofProgrammer exemplo padrão para essa entrada
Shinigamae
melhor resposta! funciona para colar, funciona mesmo no IE (10+), oferece a liberdade de exibir qualquer teclado através do tipo de entrada e não faz com que o chrome exiba essas setas para cima / baixo dentro do campo.
Janosch
5

você já tentou configurar o stepatributo para 1 como este

<input type="number" step="1" />
DevTeamExpress
fonte
4

Talvez não se ajuste a todos os casos de uso, mas

<input type="range" min="0" max="10" />

pode fazer um bom trabalho: violino .

Verifique a documentação .

Luca Fagioli
fonte
3

Sim, o HTML5 faz. Experimente este código ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Veja o parâmetro mínimo e máximo? Eu tentei usando o Chrome 19 (funcionou) e o Firefox 12 (não funcionou).

wilsonfoz
fonte
Isso pressupõe que você deseja um intervalo conhecido. Mas se você quisesse algum valor inteiro, isso ainda funcionaria?
RandomHandle
3

Basta colocá-lo no seu campo de entrada: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

illeas
fonte
3

Eu estava trabalhando no Chrome e tive alguns problemas, apesar de usar atributos html. Acabei com este código js

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
a.valchev
fonte
Acabei usando isso também com um pequeno ajuste; Mudei parseInt (valor) para parseInt (value.replace ( '') Isso me permitiu colar 1,56 e manter o valor exibido em 156 em vez de 1. ''.
codescribblr
2

Das especificações

step="any"ou número de ponto flutuante positivo
Especifica a granularidade do valor do valor do elemento.

Então você pode simplesmente configurá-lo para 1:

David Hedlund
fonte
8
Eu tentei isso, mas o problema é que você ainda pode digitar um número de ponto flutuante na caixa de texto.
JayPea
Então, você precisa de um código que impeça o usuário de digitar um ponto decimal?
Blazemonger 10/01/12
2

Defina o stepatributo como qualquer número flutuante, por exemplo, 0,01 e você estará pronto.

Mantas K.
fonte
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
Sarthak
fonte
0

Atualmente, não é possível impedir que um usuário grave valores decimais em sua entrada apenas com HTML. Você precisa usar o javascript.

Michal
fonte
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Expandir snippet

R. Yaghoobi
fonte
-2

No futuro ™ (consulte Can I Use ), nos agentes de usuário que apresentam um teclado para você, você pode restringir uma entrada de texto apenas a números input[inputmode].

Weston
fonte
inputmodeé principalmente para dispositivos portáteis e acionará o layout de teclado correto, mas para computadores "normais" com teclados, isso não impedirá a entrada do que você deseja.
vsync 18/10/2013