根据html5.org,“number”输入类型的“value属性,如果指定且不为空,必须有一个有效浮点数的值。”

然而,它只是一个带有整数的“上下”控件(至少在最新版本的Chrome中),而不是浮动:

<输入类型=“数字” id=“totalAmt”></input>

是否有一个原生的HTML5浮点输入元素,或一种方法,使数字输入类型与浮点,而不是整数工作?或者我必须求助于jQuery UI插件?


数字类型有一个步骤值,控制哪些数字是有效的(以及max和min),默认值为1。这个值也被用于步进按钮的实现(即按下增加步进)。

只需将此值更改为合适的值。对于钱,小数点后两位可能是期望的:

<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

(我也设置min=0如果它只能是正的)

如果您希望允许小数位数任意,可以使用step="any"(不过对于货币,我建议使用0.01)。在Chrome和Firefox,步进按钮将增加/减少1时,使用任何。(感谢Michal Stefanow的回答,并在这里查看相关规范)

下面是一个展示不同步骤如何影响不同输入类型的游乐场:

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


像往常一样,我将添加一个简短的说明:请记住,客户端验证只是为了方便用户。您还必须在服务器端进行验证!


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

但是如果你想让所有的数字都是有效的,整数和小数都是有效的呢?在本例中,将step设置为“any”

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

适用于我的Chrome浏览器,没有测试在其他浏览器。


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

所以它适用于:

2就可以了

2,5也可以

2.5是KO(这个数字被认为是“非法的”,你得到的是空值)。


你可以使用:

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

基于这个答案

<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表示退格(否则需要在Firefox上刷新页面) 46是点

&&是AND, ||是OR运算符。

如果你尝试使用float和逗号:

<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)(其他浏览器I不存在)。


我这样做

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

然后,我定义最小值在0.4,最大值在0.7,步骤0.01:0.4,0.41,0,42…0.7


你可以将step属性用于输入类型number:

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


我已经开始使用inputmode="decimal",它在智能手机上完美地工作:

<输入类型=“文本” 输入模式=“十进制”值=“1.5”>

注意,我们必须使用type="text"而不是number。然而,在桌面上,它仍然允许字母作为值。

对于桌面,您可以使用:

<输入类型=“数字” 输入模式=“十进制”>

允许0-9和。作为输入,只有数字。

请注意,一些国家使用,作为小数除数,这是在NumPad上默认激活的。因此,通过Numpad输入一个浮点数将不会像输入字段所期望的那样工作。(铬)。这就是为什么如果你的网站上有国际用户,你应该使用type="text"。


你可以尝试在桌面上(也与Numpad)和你的手机:

<p>输入text类型:</p> <input type="text" inputmode="decimal" value="1.5"> < br > <p>输入类型号:</p> <input type="number" inputmode="decimal" value="1.5">


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


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

这为我工作,我认为是最简单的方法,使输入字段接受任何小数,而不管小数部分有多长。 Step属性实际显示输入字段应该接受多少个小数点。 例如,step="0.01"将只接受两个小数点。


在我的IPad上使用React, type="number"并不完全适合我。 对于范围在99.99999 - .00000之间的浮点数,我使用正则表达式(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)。第一组(…)对于所有没有浮点数的正两位数(例如23)都是正确的,|或例如。12345对于第二组(…)。您可以将其用于任何正浮点数,只需分别更改范围{0,2}或{0,5}即可。

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>

这个主题(例如step="0.01")与stepMismatch相关,所有浏览器都支持如下:


是的,这是正确答案:

step="any"

这样更有效率。相信我。

<输入类型=“数字” 步骤=“任意”>

. getelementbyid(“form1”)。addEventListener(‘提交’,函数(e) { e.preventDefault (); alert("Your nnumber is: "+document.getElementById('n1').value) 警报(“这有用吗?:)请点赞”) }) <形式id =“form1 " > <input type="number" step="any" id="n1"> <按钮类型=“提交”> > < /按钮提交 > < /形式 <!——upvote:)——>


如果任何方法都不起作用,你可以使用parse float。

const totalAmt = document.getElementById("totalAmt"); totalAmt。addEventListener(“改变”,(e) = > { / / e.preventDefault (e); const result = parseFloat(e.target.value); console.log(结果) }); <input type="text" id="totalAmt" />


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