HTML5中是否有浮点输入类型？

Question

根据html5.org,"数字"输入类型的"值属性,如果指定且不为空,则必须具有有效浮点数的值."

然而它简直(在最新版本的Chrome中,无论如何),一个带有整数的"updown"控件,而不是浮点数:

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

是否存在HTML5原生的浮点输入元素,或者使数字输入类型与浮点数一起使用的方法,而不是整数？或者我必须使用jQuery UI插件？

Answer 1

该number类型具有一个step值,用于控制哪些数字有效(以及max和min),默认为1.步进按钮的实现也会使用此值(即按下增加值step).

只需将此值更改为适当的值即可.为了钱,可能需要两位小数:

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

(我也会设置min=0它是否只能是积极的)

如果你更愿意允许任意数量的小数位,你可以使用step="any"(虽然对于货币,我建议坚持0.01).在Chrome和Firefox中,步进按钮在使用时会递增/递减1 any.(感谢Michal Stefanow的回答指出any,并在此处查看相关规范)

这是一个操场,显示各种步骤如何影响各种输入类型:

<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>

像往常一样,我会添加一个快速注释:请记住,客户端验证只是方便用户.您还必须在服务器端验证!

Answer 2

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

但是,如果您希望所有数字都有效,整数和小数相同怎么办？在这种情况下,将步骤设置为"任何"

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

在Chrome中适用于我,未在其他浏览器中测试过.

Answer 3

您可以使用:

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

希望有所帮助,问候

Answer 4

您可以将step属性用于输入类型编号：

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

step="any"将允许任何小数。
step="1"将不允许小数。
step="0.5"将允许0.5; 1; 1.5; ...
step="0.1"将允许0.1; 0.2; 0.3; 0.4; ...

Answer 5

基于这个答案

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

含义:

字符代码:

• 48-57等于 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0是Backspace(否则需要在Firefox上刷新页面)
• 46是 dot

&&是AND,||是OR运营商.

如果你用逗号尝试浮动:

<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和Firefox(Linux X64)(其他浏览器我不存在.)

Answer 6

我刚刚遇到了同样的问题，由于法语本地化，我可以通过在数字中添加逗号而不是句号/句号来解决它。

所以它适用于：

2 没问题

2,5 没问题

2.5 是 KO（该数字被视为“非法”并且您收到空值）。

Answer 7

我已经开始使用inputmode="decimal"它与智能手机完美配合：

<input type="text" inputmode="decimal" value="1.5">

请注意，我们必须使用type="text"代替number。但是，在桌面上它仍然允许将字母作为值。

对于桌面，您可以使用：

<input type="number" inputmode="decimal">

它允许0-9和.作为输入并且只有数字。

请注意，某些国家/地区使用,十进制除法器，它在 NumPad 上默认激活。因此，通过 Numpad 输入浮点数将无法正常工作，因为输入字段需要 a .（在 Chrome 中）。这就是为什么您type="text"的网站上有国际用户时应该使用的原因。

您可以在桌面（也可以使用数字键盘）和手机上尝试此操作：

<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">

参考：https : //developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 8

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

这对我有用，我认为这是使输入字段接受任何小数的最简单方法，无论小数部分有多长。Step 属性实际上显示输入字段应接受多少位小数点。例如，step="0.01" 只接受两位小数。

Answer 9

我这样做了

 <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">

然后,我将min定义为0.4,最大值定义为0.7,步骤0.01:0.4,0.41,0,42 ... 0.7

Answer 10

是的，这是正确答案：

step="any"

这样效率更高。相信我。

step="any"

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

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
alert("Your nnumber is: "+document.getElementById('n1').value)
alert("This works no ? :) please upvote")
})