[英]Is there a float input type in HTML5?
根据html5.org ,“数字”输入类型的“值属性,如果指定且不为空,则必须具有一个有效浮点数的值。”
然而,它只是(无论如何在最新版本的 Chrome 中),一个带有整数的“updown”控件,而不是浮点数:
<input type="number" id="totalAmt"></input>
是否有 HTML5 原生的浮点输入元素,或者有一种方法可以使数字输入类型与浮点数一起使用,而不是整数? 还是我必须求助于 jQuery UI 插件?
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
. (感谢 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>
像往常一样,我将添加一个简短的说明:请记住,客户端验证只是为用户提供便利。 您还必须在服务器端进行验证!
通过: http ://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
但是,如果您希望所有数字都是有效的,整数和小数都一样怎么办? 在这种情况下,将 step 设置为“any”
<input type="number" step="any" />
在 Chrome 中为我工作,未在其他浏览器中测试。
您可以使用:
<input type="number" step="any" min="0" max="100" value="22.33">
您可以使用 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; ...
基于这个答案
<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">
意义 :
字符代码:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Backspace
(否则需要在 Firefox 上刷新页面)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) (其他浏览器我不存在。)
我这样做
<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
<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>
我已经开始使用inputmode="decimal"
,它可以在智能手机上完美运行:
<input type="text" inputmode="decimal" value="1.5">
请注意,我们必须使用type="text"
而不是number
。 但是,在桌面上它仍然允许字母作为值。
对于桌面,您可以使用:
<input type="number" inputmode="decimal">
这允许0-9
和.
作为输入且仅作为数字。
请注意,某些国家/地区使用,
作为小数除数,它在 NumPad 上默认激活。 因此,通过 Numpad 输入浮点数将无法正常工作,因为输入字段需要.
(在铬)。 这就是为什么如果您的网站上有国际用户,您应该使用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">
参考: https ://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
是的,这是正确的答案:
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 :)-->
我只是遇到了同样的问题,由于法语本地化,我可以通过在数字中加上逗号而不是句号/句号来解决它。
所以它适用于:
2没问题
2,5还可以
2.5 是 KO(该数字被认为是“非法的”并且您收到空值)。
<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 相关,所有浏览器都支持如下:
如果任何方法都不起作用,您可以使用 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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.