为什么只读输入字段无效 [英] Why is readonly input field not valid
本文介绍了为什么只读输入字段无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
考虑以下html：
<input bar value="bar">
<input foo readonly value="foo">
这里奇怪的是第一个输入元素是有效的，第二个输入元素不仅仅是因为它是只读！
The weird thing here is that the first input element is valid and the second one is not just because it is readonly!
$('[bar]').is(':valid') === true
$('[foo]').is(':valid') === false
这里发生了什么 ？我该如何解决这个问题？
What is going on here ? And how can I fix this ?
推荐答案
只读输入禁止约束验证，根据 HTML5 docs 。
这意味着，只读输入既无效也无效。
This means, a readonly input is neither valid nor invalid.
这里有一些代码可以演示它（看小提琴）：
Here some code which demonstrates it (see fiddle):
HTML：
<input type="email" value="invalidemail">
<input type="email" value="valid@e.mail">
<input type="email" readonly value="invalidemail">
<input type="email" readonly value="valid@e.mail">
CSS：
input:invalid {
background-color: red;
}
input:valid {
background-color: green;
}
这篇关于为什么只读输入字段无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
