html5 input元素新特性_动力节点Java学院整理

属性

元素在HTML5中新增加的属性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。

简单描述

新增加的属性描述如下：

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录。
autofocus ：当页面加载完成后，此元素获得焦点。
form ：设置元素归属表单的ID。
formaction ：设置表单action属性的值。
formenctype ：设置表单enctype属性的值。
formmethod ：设置表单method属性的值。
formnovalidate ：关闭表单的验证。
formtarget ：设置表单target属性的值。
max ：设置元素中数字或日期控件的最大值。
min ：设置元素中数字或日期控件的最小值。
minlength ：设置文本输入控件的内容最小长度。
pattern ：设置元素文本内容需匹配的正则表达式。
placeholder ：设置文本控件的预先显示内容。
readonly ：设置元素是否只读。
required ：设置控件是否为必填项。

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录

说明：设置当前文本元素中是否显示与现在内容相匹配的历史输入记录。

场景：搜索框需要此属性，而验证码就不需要。

可设置的值：只可以设置on、off两个值。

autocomplete="on" ：显示匹配的历史输入记录。
autocomplete="off" ：不显示匹配的历史输入记录。

示例：


    验证码：

autofocus ：当页面加载完成后，此元素获得焦点

说明：若页面中有多个元素含有此属性，只会最前面的元素获得焦点。

示例：

姓名：

地址：

form ：设置元素归属表单的ID

说明：若元素不在表单标签里，可设置此值为需要归属的表单ID。

示例：

formaction ：设置表单action属性的值

formenctype ：设置表单enctype属性的值

formmethod ：设置表单method属性的值

说明：可设置的值为post、get等。

formnovalidate ：关闭表单的验证。

说明：可应用于类似【暂存】操作。

示例：


    用户名：

formtarget ：设置表单target属性的值

说明：可设置的值为_self、_blank、_parent、_top等。

max ：设置元素中数字或日期控件的最大值

min ：设置元素中数字或日期控件的最小值

minlength ：设置文本输入控件的内容最小长度

pattern ：设置元素文本内容需匹配的正则表达式

说明：元素文本内容指定的正则表达式完全匹配才会验证通过。

注意：

1) 浏览器不会验证空值，若想必填可加上 required 属性。

2) 若含有title属性的值，当匹配失败会显示title的信息。

示例：


    手机号码：

placeholder ：设置文本控件的预先显示内容

说明：只有文档内容为空才会显示此属性设定的值。

示例：

姓名：

readonly ：设置元素是否只读

required ：设置控件是否为必填项

说明：当提交表单时，才会验证此元素是否填写，若没有填写，将显示警告信息并取消提交操作。

示例：


    用户名：

方法

元素在HTML5中增加了2个与校验相关的方法：
checkValidity() ：判断控件的内容是否校验通过。
setCustomValidity() ：设置校验不通过时的自定义信息。
boolean checkValidity() ：判断控件的内容是否校验通过

返回值：

{boolean} 返回一个boolean值表示控件内容是否校验通过。

示例：

HTML：

 网址：

JavaScript：

// 内容为：www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过
 
// 内容为：http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true ：验证通过

void setCustomValidity(string msg) ：设置校验不通过时的自定义信息

说明：在此元素上弹出一个警告框，显示自定义信息。

注意：只有表单验证时才会显示自定义的警告信息。

参数：

msg {string} ：设置需要显示的信息。若为空值，将关闭警告框。

示例：

HTML：


    新的密码：
    确认密码：

JavaScript：

// 校验2个密码是否一致
var validityPwd = function(){
    var newPwd = document.getElementById('newPwd');
    var newPwdConfirm = document.getElementById('newPwdConfirm');
    if(newPwd.value != newPwdConfirm.value){
        newPwdConfirm.setCustomValidity('两次密码输入不一致');
    }else{
        newPwdConfirm.setCustomValidity('');
    }
}