CSS 输入 :invalid incorrectly applied

Question

我有这个 fiddle :

http://jsfiddle.net/rkTCq/

代码只是一个带有模式的数字类型的输入字段

pattern="[0-9]+(\.[0-9]+)?"

如果输入无效，CSS 会添加一个红色边框:

input:invalid { border:1px solid red; }

但是，如果我键入 1.3 然后用 Tab 键退出该字段，我会得到一个红色边框，尽管根据模式这是正确的。这里有什么问题？

PS:这是在 safari 中。

编辑:好的，我添加了 step="any"，这似乎解决了这个问题。大家可以确认一下吗？

http://jsfiddle.net/rkTCq/2/

Answer 1

您已将输入定义为 type=number。如本文所述，必须使用 step 属性明确允许 float 才能正确验证。

https://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

在您的输入中添加一个步骤属性:step="any":

<input type="number" name="quantity" class="form-control" placeholder="Quantity" tabindex="2" step="any">

此外，根据 MDN pattern 不适用于 number 类型:

This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored