前面的话
表单字段又叫表单元素,表示表单所包含控件,如<input>、<select>等。本文将详细介绍表单字段的内容
访问
每个表单都有elements属性,该属性是表单中所有元素的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,如<input>、<textarea>、<button>和<fieldset>
[注意]不包括图片按钮<input type="image">
每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name特性来访问它们
<form action="#">
<input type="text" name="a">
<textarea name="b"></textarea>
<button name="c"></button>
<fieldset name="d"></fieldset>
</form>
<script>
var elements = document.forms[0].elements;
//[input, textarea, button, fieldset, a: input, b: textarea, c: button, d: fieldset]
console.log(elements);
//<input type="text" name="a">
console.log(elements.a);
//<textarea name="b"></textarea>
console.log(elements[1])
console.log(elements[3] === elements.d)//true
</script>
【form[name]】
除了使用elements元素集合外,还可以使用form[name]来获取表单内的元素控件
<form name="form" id="myForm">
<input type="text" id="a1" name="a" >
</form>
<script>
var myInput1 = myForm.a;
console.log(myInput1.id);//'a1'
</script>
属性
除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性
disabled 布尔值,表示当前字段是否被禁用
form 指向当前字段所属表单的指针;只读
name 当前字段的名称
readOnly 布尔值,表示当前字段是否只读
tabIndex 表示当前字段的切换(tab)序号
type 当前字段的类型,如"checkbox"、"radio"等等
value 当前字段将被提交给服务器的值
defaultValue 表示该表单元素的初始值
除了form属性之外,可以通过javascript动态修改其他任何属性
<form action="#">
<input value="123">
</form>
<script>
var input = document.forms[0].elements[0];
console.log(input.disabled);//false
console.log(input.form);//<form action="#"></form>
console.log(input.name);//''
console.log(input.readOnly);//false
console.log(input.tabIndex);//0
console.log(input.type);//text
console.log(input.value);//123
console.log(input.defaultValue);//123
</script>
<form action="#">
<input value="123">
</form>
<button id="btn1">禁用(启用)</button>
<button id="btn2">只读(读写)</button>
<script>
var input = document.forms[0].elements[0];
btn1.onclick = function(){
input.disabled = !input.disabled;
}
btn2.onclick = function(){
input.readOnly = !input.readOnly;
}
</script>
style="width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/html/formobj/f4.html" frameborder="0" width="320" height="240">
方法
每个表单字段都有两个方法:focus()和blur()
focus()
focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件
[注意]非表单元素设置tabIndex=-1,并设置focus()方法后,也可以获得焦点
blur()
与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已
<input id="test" type="text" value="123">
<button id="btn1">input元素获得焦点</button>
<button id="btn2">input元素失去焦点</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/html/formobj/f5.html" frameborder="0" width="320" height="240">
事件
除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件
focus
当前字段获得焦点时触发
blur
当前字段失去焦点时触发
change
对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发
当然,也支持focusin和focusout事件,在焦点管理中已经做了详细介绍,就不再重复
<input id="test" type="text" value="123">
<script>
test.onchange = function(){
this.style.backgroundColor = 'pink';
}
</script>
style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/html/formobj/f6.html" frameborder="0" width="320" height="240">
顺序
当一个input元素的值改变并且失去焦点时,blur和change事件的顺序是怎么样的呢?
所有的浏览器的触发顺序都是先change事件,再blur事件
<input id="test" type="text" value="123">
<script>
test.onblur=test.onchange = function(e){
e = e || event;
this.value = e.type ';';
}
</script>
style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/html/formobj/f7.html" frameborder="0" width="320" height="240">
更多专业前端知识,请上 【猿2048】www.mk2048.com