Question

我希望默认值为0，如果输入大于0，则使用:valid重新着色输入。难道我做错了什么？谷歌浏览器错了吗？还是HTML5规范？我想在没有JS的情况下解决这个问题。

:valid {
  background: green
}

<p>This should not be green, but it is:</p>
<input max="100" min="0" pattern="^[1-9]\d*$" type="number" value="0" />

<p>Works perfectly, if the type is changed to text:</p>
<input pattern="^[1-9]\d*$" type="text" value="0" />

Answer 1

Citing MDN on the pattern property（突出显示已添加）：

图案

检查控件值的正则表达式。   模式必须匹配整个值，而不仅仅是某个子集。使用   title属性用于描述帮助用户的模式。 ：此   当type属性的值为text时，属性适用   搜索，电话，网址或电子邮件;否则会被忽略。常规   表达式语言与JavaScript相同。模式不是   被正向斜线包围。

有趣的是，我无法在W3C和WhatWG标准中找到任何提及的内容。

Answer 2

我看到如果你给出最小值1，颜色不是绿色为0.当你输入1时，颜色变为绿色。我认为这是你所期待的，对吧？

基本上，您可以使用最小值和最大值进行验证。我不认为你需要这种模式。

<input max="100" min="1" type="number" value="0" />

这里有一个限制。如果你将该字段留空，它仍然是绿色的！

如何在输入[type =“number”]上使用模式？

2 个答案: