首页 > js学习 > js基础知识 > 表单字段(控件)选择和共有属性方法及事件
2016
12-16

表单字段(控件)选择和共有属性方法及事件

表单字段(控件)选择

如果想访问表单元素,可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用,但不是很便利。表单处理中,我们建议使用HTML DOM,它有自己的elements属性,该属性是表单中所有元素的集合。

fm.elements[0]; //获取第一个表单字段元素

fm.elements['user']; //获取name是user的表单字段元素

fm.elements.length; //获取所有表单字段的数量

如果多个表单字段都使用同一个name,那么就会返回该name的NodeList表单列表。

我们是通过fm.elements[0]来获取第一个表单字段的,但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的,所以,使用elements属性来获取。

共有的表单字段属性

除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段,共有的属性:

disabled:布尔值,表示当前字段是否被禁用

form:指向当前字段所属表单的指针,只读

name:当前字段的名称

readOnly:布尔值,表示当前字段是否只读

tabIndex:表示当前字段的切换

type:当前字段的类型

value:当前字段的值

除了<fieldset>字段之外,所有表单字段都有type属性。对于<input>元素,这个值等于HTML属性的type值。对于非<input>元素,这个type的属性值如下:

单选列表(<select>...</select>):select-one

多选列表(<select multiple>...</select>):select-multiple

自定义按钮(<button>...</button>):button

自定义非提交按钮(<button type="button">...</button>):button

自定义重置按钮(<button type="reset">...</button>):reset

自定义提交按钮(<button type="submit">...</button>):submit

<input>和<button>元素的type属性是可以动态修改的,而<select>元素的type属性则是只读的。(在不必要的情况下,建议不修改type)。

每个表单字段都有两个方法:foucs()(将焦点定位到表单字段里)和blur()(从元素中将焦点移走)。

表单共有的字段事件有以下三种:

blur:当字段失去焦点时触发

change:对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发

focus:当前字段获取焦点时触发

关于blur和change事件的关系,并没有严格的规定。在某些浏览器中,blur事件会先于change事件发生;而在其他浏览器中,则恰好相反。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。