Javascript高級編程學習筆記（75）—— 表單（3）表單字段

表單字段

表單做爲web應用中不可或缺的一部分，固然也是可使用原生的 DOM 元素來訪問的

除了標準的訪問方式以外，每一個表單都擁有一個 elements 屬性，該屬性保存着該表單全部 表單元素 的集合，該集合是一個有序列表，包含着全部的表單字段

這些元素在該集合中出現的順序，與在文檔中出現的順序一致

 

在該集合中可使用 name 和 在文檔中的順序 來對其中的元素進行索引

如有多個表單元素擁有相同的 Name，那麼將會返回一個 nodelist 集合

 

如下方的HTML代碼片斷爲例：

<form method = "post" id="myForm">
    <ul>
        <li><input type = "radio" name = "color" value = "red">Red</li>
        <li><input type = "radio" name = "color" value = "green">Green</li>
        <li><input type = "radio" name = "color" value = "blue">Blue</li>
    </ul>
</form>

 

在上面這個簡單的表單中，有三個單選按鈕，他們的name都是「color」，若是咱們訪問  elements["color"]  將會返回一個 nodelist，包含上邊代碼中的 三個 input 元素

不過若是訪問 elements[0] 將只會返回第一個 input 元素

 

共有的表單字段屬性

除了<fieldset>元素以外，全部的表單字段都擁有一組公共相同的屬性

因爲 <input> 類型能夠表示多種表單字段，所以有些屬性只適用於部分表單字段，但仍有一些屬性是全部字段所共有的

 

表單字段共有的屬性以下：

1. disabled：布爾值 表示當前的字段是否被禁用
2. form：指向當前字段的全部表單屬性
3. name：當前字段的名稱
4. readOnly：布爾值，表示當前字段是否只讀
5. tabIndex：表示當前字段的切換（tab）序號
6. type：當前字段的類型
7. value：當前字段提交給服務器的值

以上屬性中只有 form 是沒法修改的

其它字段均可以經過 JavaScript 動態修改

 

對於上面屬性中的 type 屬性：

• input 的 type 屬性和其HTML特性的值一致
• select 的值爲 「select-one」
• <select multiple> 的值爲 "select-multiple"
• button 的 type 屬性和其HTML特性的值一致

 

例如上一篇文章提到的當用戶提交請求後就禁用按鈕，這一功能則能夠經過如下代碼實現：

var form = document.getElementById("myForm");// 獲取表單元素

form.addEventlistener("submit",function(event){
    var btn = event.target;// 獲取觸發提交事件的按鈕

    btn.disabled = true;// 禁用該按鈕
},true)

須要注意的是：不要使用 click 事件來禁用按鈕，由於不一樣的瀏覽器之間存在時差，即沒法肯定click事件禁用按鈕時數據是否被髮往服務器

 

共有的表單字段方法

全部的表單字段都擁有兩個方法： focus（） 和   blur（）

其中 focus 方法用於將瀏覽器的焦點設置到表單字段，用以激活表單字段，使其能夠響應表鍵盤事件

 

其中focus的主要用途有兩種

1. 用於當文檔加載完成後將用戶的注意力吸引到表單的特定位置
2. 用於用戶輸入信息校驗，即只有當用戶的輸入達到要求時才能改變焦點進行其它操做

 

對於第一種應用場景，咱們只須要在文檔的 load 事件完成以後，對咱們但願的元素調用 focus 方法便可

而對於第二種應用場景也十分的簡單，只須要在當咱們校驗檢測不經過時又將焦點設置回原來的元素便可

此外，對於第一種應用場景 HTML5 提供了 autofous 特性用於實現這一效果：

<input type="text" autofocus>

在支持該特性的瀏覽器中當文檔加載完成，焦點就會設置爲上面的 input 元素

 

blur方法的做用與 focus 方法相反，將焦點從當前元素移除，但並不移動到某個特定元素

這個方法早期用於建立只讀字段，即當觸發獲取焦點事件就調用 blur 方法將焦點移出該元素

 

共有的表單字段事件

除了支持基本的 鼠標、鍵盤、變更、HTML事件以外，全部的表單字段都支持如下三個事件：

1. blur：當前字段失去焦點時觸發
2. change：對於 input、textarea 元素，當其失去焦點且value值被改變時觸發，對於select元素改變選項時觸發
3. focus：當前字段得到焦點時觸發

 

一般使用上述事件來改變用戶界面，或者向用戶給出視覺提示

其中change事件則經常用於驗證用戶輸入

 

須要注意的地方在於：blur事件和change事件的關係並無嚴格的規定，在某些瀏覽器中blur事件會先於change事件發生，而有些則偏偏相反