HTML5中有浮点输入类型吗?

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

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

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

(如果它只能为正，我也会设置min=0)

如果您希望允许任意数量的小数，您可以使用step="any"(尽管对于货币，我建议坚持使用0.01)。在Chrome &Firefox中，步进按钮在使用any时将增加/减少1。(感谢Michal Stefanow指出了第2点和第4点)

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

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

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

通过:# 0

但是如果你想让所有的数字都是有效的，整数和小数都是有效的呢?在本例中，将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
• 0是Backspace(否则需要在Firefox上刷新页面)
• 46是0

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

支持的chrome和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;…
< / p >

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

# 0

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

对于桌面，您可以使用:

# 0

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

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

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

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

参考:# 0

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

在我的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}

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

是的，这是正确答案:

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

<form id="form1"><input type="number" step="any" id="n1"><button type="submit">Submit</button></form><!-- UPVOTE :)-->

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

const totalAmt = document.getElementById("totalAmt");

totalAmt.addEventListener("change", (e)=>{// e.preventDefault(e);const result = parseFloat(e.target.value);console.log(result)});

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