HTML5数字输入字段在Internet Explorer 10和Internet Explorer 11中的步骤属性失效

Question

我的网站有些用户在尝试将值插入设置了step属性的数字输入字段时遇到了问题。

我正在使用Django 1.6将表单呈现为HTML。

数字字段映射到具有max_digits=25和decimal_places=5的基础DecimalField模型字段，这会导致呈现以下示例HTML：

<input type="number" value="" step="0.00001" name="quantity" id="id_quantity">

我知道的step属性在FireFox中尚未得到支持，但在Opera、Chrome、Safari和IE10+中得到了支持。在所有浏览器中，除了IE10和IE11以外，一切都运行良好。在上面的例子中，在IE10和IE11中可以输入的最大范围是-227到227。如果我尝试输入比这个范围更低或更高的值，我会收到“您必须输入有效值”的错误提示，无法提交表单。

根据http://www.w3schools.com/tags/att_input_step.asp

step属性指定了一个元素的合法数字间隔。

例如：如果step="3"，那么合法的数字可以是-3、0、3、6等。

因此，在我的用户示例中，他们试图输入20000作为值，在IE10和IE11中失败了。如果我的计算正确，20000落入了一个0.00001的间隔中。

对我来说，解决方案可能是从使用数字字段的所有表单中删除step属性，可以通过django表单或使用javascript实现，但我认为这将是一个非常混乱的解决方案，违背了HTML5的原则。

还有其他人遇到过类似的问题吗？我有做错了什么，还是这是IE10和IE11中的一个bug？

欢迎任何想法、评论或答案。与此同时，我将被迫向受影响的用户提供我的常规解决方案，建议他们使用可以工作的浏览器。

- chewynougat

Answer 1

你并不孤单，IE存在着很多bug。

我不确定IE10，但现在我只能测试IE11，它将number字段视为date字段，实际上它根本不应支持这一点，当传递例如20000时，它会说“插入有效日期”(原来是"Geben Sie ein gültiges Datum ein")。

事实上，当输入类似于01.01.2000或01-01-2000的内容时，它通过了验证，即使是20000.01.123456789，90000或0.foobar也能够通过验证，所以我想验证可能完全乱了。

因此，暂时来说，如果你想迎合IE用户，你可能需要使用某种polyfill。

- ndm

---

谢谢ndm，很高兴我不是一个人。我希望我可以避免为IE开发中的失败而进行填充，我相信这将影响许多网站用户。这是一个非常微妙的错误。 - chewynougat

Answer 2

在这种情况下，IE10的HTML5表单验证非常有缺陷，因此您可能需要考虑禁用此表单的HTML5表单验证。

您可以通过向表单标记添加novalidate属性来实现此目的。例如，您可能想要执行以下操作：

<form method='POST' action='.' novalidate='novalidate'>
    <input type="number" value="" step="0.00001" name="quantity" id="id_quantity">
</form>

设置novalidate将告诉浏览器不要试图变得有用，这应该可以解决您的问题。但是，请注意，这将对所有浏览器禁用整个表单的HTML5验证。如果您需要在从IE中移除此功能的同时保留某些浏览器，则必须在检查浏览器用户代理后在页面加载时通过Javascript添加novalidate属性。但是，此用户代理可以被欺骗，因此这不是一个理想的解决方案。

- wdh

---

这对我的情况没有任何影响。 - platzhersh

Answer 3

我也遇到了同样的问题，将step="any"添加到字段级别解决了我的问题。

- Waqar Arshad

---

太棒了！我遇到了一个“有趣”的问题，即IE会使步骤为0.1的值1.1、1.2和1.4无效，但其他所有内容都按计划工作。这修复了这种行为。 - Simopaa

Answer 4

看起来IE10+需要一个MIN和MAX值才能正常工作。如果您定义了这些值，它将与10000的值一样正常工作：

<input type="number" value="" step="0.00001" min="-100000" max="100000" name="quantity" id="id_quantity" />

看来数值输入的步长属性就像范围输入一样，需要最小值、最大值和步长值。

如果你真的不能定义最小值和最大值，你必须使用JavaScript来完成。

- DePhiless

---

你测试这个在哪个操作系统上？对我来说，IE11以及开发工具仿真的IE10显示出与没有min/max属性相同的行为。 - ndm