Existe um tipo de entrada flutuante em HTML5?

819

De acordo com html5.org , o atributo de valor "do tipo de entrada" número ", se especificado e não estiver vazio, deve ter um valor que seja um número de ponto flutuante válido".

No entanto, é simplesmente (na versão mais recente do Chrome), um controle "atualizado" com números inteiros, não flutuantes:

<input type="number" id="totalAmt"></input>

Existe um elemento de entrada de ponto flutuante nativo para HTML5 ou uma maneira de fazer o tipo de entrada de número funcionar com flutuadores, não com ints? Ou devo recorrer a um plugin jQuery UI?

B. Clay Shannon
fonte

Respostas:

1663

O numbertipo tem um stepvalor que controla quais números são válidos (junto com maxe min), cujo padrão é 1. Este valor também é usado pelas implementações dos botões de passo (por exemplo, pressionar para cima aumenta em step).

Simplesmente altere esse valor para o que for apropriado. Por dinheiro, provavelmente são esperadas duas casas decimais:

<input type="number" step="0.01">

(Eu também definiria min=0se isso só pode ser positivo)

Se você preferir permitir qualquer número de casas decimais, use step="any"(embora seja para moedas, recomendo continuar 0.01). No Chrome e Firefox, os botões deslizantes aumentam / diminuem em 1 ao usar any. (obrigado pela resposta de Michal Stefanow por apontar anye veja as especificações relevantes aqui )

Aqui está um playground mostrando como várias etapas afetam vários tipos de entrada:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>


Como sempre, adicionarei uma nota rápida: lembre-se de que a validação do lado do cliente é apenas uma conveniência para o usuário. Você também deve validar no lado do servidor!

Dave
fonte
1
Para responder à edição do @ Elfayer: aspas são opcionais em HTML, a menos que você queira usar determinados caracteres. Pessoalmente, prefiro omiti-los sempre que possível para melhor legibilidade.
Dave
5
Isso não está funcionando corretamente nas versões mais recentes do Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him 3/15/15
7
@ Dave: Sim, tecnicamente, omitir aspas é bom, mas apresenta uma série de possíveis problemas. Primeiro, um subconjunto de caracteres é tratado de maneira diferente em diferentes navegadores e versões dos mesmos. Se você optar por não usar aspas, deverá estar constantemente ciente de quais caracteres causarão problemas em cada navegador e versão. É muito poder mental dedicado a algo que não é necessário se preocupar, se você apenas usar aspas. (cont.)
Chris Pratt
9
Segundo, embora você possa se preocupar com as regras de quais personagens são bons e quais não, o desenvolvedor que está atrás de você provavelmente não o será. Isso exige que eles suportem a árdua tarefa de adicionar aspas a todos os atributos que você deixou sem aspas ou algo pior, simplesmente introduza problemas no código que eles talvez nem entendam a fonte. Finalmente, como às vezes você precisará usar aspas, o código parecerá inconsistente com alguns atributos citados e outros não.
Chris Pratt
2
@relipse veja aqui: stackoverflow.com/q/3790935/1180785 mas não deixe de ler os comentários de cada resposta; parece que todas as opções têm desvantagens e você precisará ver o que se adapta às suas necessidades específicas.
Dave
153

Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Mas e se você quiser que todos os números sejam válidos, números inteiros e decimais? Nesse caso, defina a etapa como "qualquer"

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

Funciona para mim no Chrome, não testado em outros navegadores.

Mars Robertson
fonte
4
Chrome => Obras perfeito Safari => não vai mostrar mensagem de erro, e se não o número não vai passar para o servidor IE => Versão menos de 10 não, funciona
Abhi
4
Infelizmente, no chrome, você pode inserir vários pontos decimais, por exemplo, um endereço IP.
21415 Andy
18

Você pode usar:

<input type="number" step="any" min="0" max="100" value="22.33">
alvarodoune
fonte
12

Você pode usar o atributo step para o número do tipo de entrada:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"permitirá qualquer decimal.
step="1"não permitirá decimal.
step="0.5"permitirá 0,5; 1; 1,5; ...
step="0.1"permitirá 0,1; 0,2; 0,3; 0,4; ...

Andrei Thuler
fonte
8

Com base nesta resposta

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Significado:

Código Char:

  • 48-57 igual a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 é Backspace(caso contrário, é necessário atualizar a página no Firefox)
  • 46 é dot

&&é AND, ||é ORoperador.

se você tentar flutuar com vírgula:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Chromium e Firefox suportados (Linux X64) (outros navegadores que não existem)

dsgdfg
fonte
Sente-se para trás. Que tal copiar e colar no campo?
Mars Robertson
4
Hackear para entrada, cortar para copiar e colar, cortar sobre uma hack = má prática. Temos 2017
Mars Robertson
Onde você lê alguma entrada de senha? Quem se importa com o método usado após uma sessão? Não, nós temos 1856! Tente outro usuário!
precisa saber é
Parece muito complicado, mas o raciocínio deste método em relação aos outros mencionados não foi fornecido
WebDude0482
6

Eu faço isso

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

então, defino min em 0,4 e max em 0,7 com a etapa 0,01: 0,4, 0,41, 0,42 ... 0,7

sadalsuud
fonte
4

Eu só tinha o mesmo problema e poderia corrigi-lo colocando uma vírgula e não um ponto / ponto final no número por causa da localização em francês .

Por isso, trabalha com:

2 está OK

2,5 está OK

2.5 é KO (o número é considerado "ilegal" e você recebe valor em branco).

Stephane
fonte
3
adicionar lang = "en" para entrada ou qualquer pai e ele vai começar a usar o Inglês estilo de número
user1040495