深入理解表單腳本系列第二篇——表單字段 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

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