&nbs p;
我在下一盘很大的棋，本文只是其中的一个棋子。
需要提前知道的：
目前而言，对 step 雄起的浏览器为IE10+, Chrome以及Opera浏览器。 需要预先知道 number 类型 input 的一些基本知识。 HTML 5 step 的验证机制可以应用在不支持的浏览器上。问题 引导 ，威逼利诱
如下一小段含 step 属性的HT ML 代码：
<input ty PE ="number" step="2.1" min="1" />
在Ch rom e浏览器下长相 应该 是下面这个样子（假设限 宽 70像素）：
下面提问，请问：
对于上面的 number 框，下面几个数值 哪些 是有效的？
A. 1.0
B. 2.1
C. 3.1
D. 4.2
我的答案是：
(function() { VAR eleAnswer = document.getElementById("answer"), eleSure = document.getElementById(" answers ure"); eleSure.onclick = function() {if (/^c|a|3/.1$/i. test (eleAnswer.value) || Number(eleAnswer.value) === 1){alert("不错嘛，回答正确！");}else if (eleAnswer.value){alert("%>_
如果上面的框框点击了没有反应，可能是因为您在其他网站或是RSS中阅读本文，本文原地址：http://www.zhangxinxu .COM /word Press /?p=2790。
在你大脑这样：
也有可能是这样子：
之后，我们得到了正确的答案： A. 1.0 以及 C. 3.1
可能有人有疑问？明明 step 是 2.1 ，但是 2.1 确实无效的数值呢？？
keep on~~
实例页面，现身说法
如果您正在使用的是 文章 一 开始 提到的“雄起”浏览器，您可以狠狠地点击这里：HTML5 number文本框step验证demo
下为C hr ome浏览器下截图：
N个 number 类型输入框，您可以随意设置值，点击最后的“提交”按钮，内置的HTML验证会判断您输入的数值 是否 是符合要求的。
例如，与上面的提问对应的输入框是倒数第二个框框，如下示意：
我们依次输入 1.0 , 2.1 , 3.1 , 4.2 看一下是否会出现提示，结果依次如下截图：
但是，同样是 step=2.1 上面一个框框，输入 3.1 却是无效的：
为何有此差异呢？
细心的你可能发现了其中的差异，就是 min 属性作的祟。
当 min=1 的时候，
min + step * 0 = 1 + 2.1 * 0 = 1 min + step * 1 = 1 + 2.1 * 1 = 3.1 min + step * 1 = 1 + 2.1 * 2 = 5.2 . . .
于是， 1.0 以及 3.1 是有效值，而 2.1 无效的。
当 number 框没有 min 的时候， min 是无限小，实际验证的时候， min 等同于 0 , 因此：
<input type="number" step="2.1" />
的有效值是： 0 , 2.1 , 4.2 .
min + step * 0 = 0 + 2.1 * 0 = 0 min + step * 1 = 0 + 2.1 * 1 = 2.1 min + step * 1 = 0 + 2.1 * 2 = 4.2 . . .
max 跟 step 的有效值判断不来 电 的。
总结概括，小功告成
末日即将来临，没有多少时间扯废话，以下为demo页面测试得出的一些结论：
输入非数值内容，如字母 x ，值会被置空缺省处理 - 浏览器当作你没输入过。 在number输入框的世界里，1.00和1.0和1是没 有区别 的。 默认 step 为 1 ，因此，木有step属性值的时候，小数值是无效的（ .0 除外）。输入数值的有效与否与 step 以及 min 属性相关，至于 max , 是卖切糕的，不搭噶。 输入值 是否有效 的计算公式是：
是否：(输入数值 - min值) ÷ step值 == = 整数当没有 min 的时候，我们可以把 min 等同于 0 计算处理（实际min是无限小）。 IE10虽然支持 number 类型输入框，但是在UI表现上，却没有上下增减按钮。而且，其提示效果真是粗糙的令人啧舌！
opera 浏览器不能准确认识 step=".1" ， 或者 应该是不认识，IE10以及Chrome浏览器可以准确识别为 step="0.1" , 因此，从兼容角度来讲，还是写成 0.1 而不是 .1 每个浏览器对值无效时候的提示文字都是不一样的：
IE10是：“你必须输入有效值”；
Opera是：此表单不允许数字 **。此输入框值允许特定的数字。
Chrome是：值无效。
个人而言，更喜欢Chrome的简洁明了的表述。
欢迎补充，欢迎指出文章表述不准确的地方。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5 number类型文本框step属性的验证机制 全部内容，希望文章能够帮你解决 html5教程-HTML5 number类型文本框step属性的验证机制 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5 number类型文本框step属性的验证机制的详细内容...