HTML5输入属性,通过Javascript访问?

前端之家收集整理的这篇文章主要介绍了HTML5输入属性,通过Javascript访问?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
您可能知道,在HTML5规范中,我们获得了< input>的一些新属性。元素,如要求和模式。这提供了一种验证用户输入的好方法,甚至可以使用CSS和伪选择器对它进行可视化。例

HTML

<input type="number" pattern="\d+" required/>

CSS

input:required:valid {
    border: 1px solid green;
}

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

如果< input>元素将成为< form>的一部分。元素,用户将无法将其提交到无效状态。

但是,我的问题是,如果我们要使用没有< form>的新属性,元素?是否存在访问这样的< input>的当前状态的方法。节点通过ECMAscript直接?

任何事件?任何听众?

解决方法

正如 @Zirak所指出的那样, checkValiditycheckValidity的一部分。
var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

但是,如果无效,checkValidity会触发无效事件。 (表单将被红色列出。)您可能需要使用willValidate属性(或.validity.valid属性)。

此外,有效性属性是非常有趣的(有关Constraint Validation API的每个属性意味着更多的信息):

s.validity
    ValidityState
        customError: false
        patternMismatch: false
        rangeOverflow: false
        rangeUnderflow: false
        stepMismatch: false
        tooLong: false
        typeMismatch: false
        valid: false
        valueMissing: true

本文指出浏览器之间的差异:http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/(即:像往常一样乱七八糟)

您还可以收听invalid事件,触发表单的提交,或当调用checkValidity方法时。

演示:http://jsfiddle.net/XfV4z/

原文链接:https://www.f2er.com/html5/169015.html

猜你在找的HTML5相关文章