深入理解表单脚本系列第二篇——表单字段

Posted 2020-08-09 小火柴的蓝色理想

[1]访问 [2]属性 [3]方法 [4]事件

前面的话

　　表单字段又叫表单元素，表示表单所包含控件，如<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>

方法

　　每个表单字段都有两个方法：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>

事件

　　除了支持鼠标、键盘、更改和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>

顺序

　　当一个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>