HTML5 输入模式在输入类型 =“数字”中不起作用答案

【问题标题】：HTML5 input pattern not working in input type="number"HTML5 输入模式在输入类型 =“数字”中不起作用
【发布时间】：2017-04-19 07:24:51
【问题描述】：

我在input type="text" 中使用了输入模式它的工作代码

<input name="name" required pattern=".{4,}" title="Please Enter Correct Name" type="text" />

但是当我在input type="number" 中使用输入模式时，它不起作用

<input name="number" required type="number" pattern=".{9,20}" title="Please Enter Your Number at least 9 Digit" />

【问题讨论】：

不适用于 type="number"。看看这个html.spec.whatwg.org/multipage/forms.html#do-not-apply
您应该在数字输入上使用 JavaScript 而不是模式。
^^ 和这里：w3.org/TR/html5/forms.html#number-state-(type=number) - 记账细节下的第 4 点。
顺便说一下required="true"是错的；它应该只是required 或required="required"。见W3C。
@MrLister 如果您支持 IE，实际上这是不正确的。旧版本的 Internet Explorer 只能识别 required="true"。由于所有其他浏览器只需要出现 required 属性，required=true 是最通用的版本

标签： css html

【解决方案1】：

来自MDN

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用 title 属性来描述模式以帮助用户。当 type 属性的值为 text、search、tel、url、email 或 password 时，该属性适用，否则将被忽略。

【讨论】：

【解决方案2】：

模式属性仅适用于 text、date、search、url、tel、email 和 password 输入类型：HTML5 input specification。向下滚动一点，您会看到一个表格，告诉您哪些属性可以用于不同的输入类型。

你应该使用 javascript 来实现你想做的事情。

【讨论】：

【解决方案3】：

模式属性适用于以下输入类型：文本、日期、搜索、url、电话、电子邮件和密码。因此您不能将其与输入数字一起使用你可以在这里查看

【讨论】：