HTML5输入类型"数字"模式未被强制执行

Question

Chrome中的以下代码未强制执行'00 .00'的模式,它允许任何格式的数字具有无限小数.使用输入类型"文本"时,模式工作正常,因此不确定这是否是"数字"问题？

任何建议赞赏.

<input type="number" step="1.00" min="0" pattern="\d+(\.\d{2})?" class="form-control" id="JobCost" name="jobcost">

的jsfiddle

Answer 1

这是一个相当古老的问题,但我试图理解同样的事情,这是我能够确定的.

首先,类型的输入number不使用该pattern属性,因此忽略它.

其次,该step属性不仅决定了向上/向下点击器的步骤,还决定了有效值的集合.例如,如果将步骤设置为1.11,则有效值为1.11,2.22,3.33等.如果您输入5.2并提交,它将回复"请输入有效值.两个最接近的有效值为4.44和5.55." 如果你没有进入该步骤,它默认为1.然后它只允许"整数"(我使用引号,因为从技术上讲,它将允许1.或1.0或1.00等).如果您想使用任何数字,请使用step="any".我确实读过某个地方,虽然chrome强制执行默认步骤1,但firefox将允许小数(将其视为任何??).

第三,如果它没有嵌入form标签内,这一切都不起作用.

因此,如果您要强制执行2位小数,请使用type="number" step=".01"(了解您的上/下单击器将增加/减少.01)或使用type="text" pattern="\d+(\.\d{2})?".请注意,在你的正则表达式上,它不会允许,.23因为你有\d+.但它会允许的0.23.如果要允许小数而不带前导0,请\d+(\.\d{2})?改用.它也只允许2位小数或无(拒绝1.和1.2,但接受1.20).如果这就是你想要的,那很好.只是想确定一下.

\d*(\.\d{0,2})?会接受任何数字,最多2个小数点但不能更多.它也会接受.,所以你必须根据你想要的东西来玩.

希望能像我一样帮助你或其他任何人遇到这种情况.