JavaScript表單_ZenDei技術網路在線

JavaScript表單這篇文章的主要目的是介紹表單相關的知識，如表單基礎知識、文本框腳本相關用法、選擇框腳本相關用法以及等知識。雖然在現代web開發中，很少會使用form預設行為提交表單數據，而是會禁用預設行為，然後使用Ajax方式通過POST請求非同步提交表單數據。但是這並不代表form表單不重 ...

JavaScript表單

這篇文章的主要目的是介紹表單相關的知識，如表單基礎知識、文本框腳本相關用法、選擇框腳本相關用法以及等知識。雖然在現代web開發中，很少會使用form預設行為提交表單數據，而是會禁用預設行為，然後使用Ajax方式通過POST請求非同步提交表單數據。但是這並不代表form表單不重要了。form表單仍然是提交表單最快的方式，因為JavaScript提供了許多屬性和方法讓我們快速獲取表單欄位的值。所以，對form的理解和掌握還是很有必要的。

目錄：JavaScript表單

form表單
- 屬性
- 方法
- 事件
form表單欄位(表單欄位包括input, button, select, textarea, 以下屬性方法事件為所有表單欄位共有)
- 屬性
- 方法
- 事件
文本框(input, textarea)
- 屬性
- 實際應用
  - 選擇文本
  - 過濾輸入
  - 自動切換焦點
選擇框(select, option)

form表單

獲取HTML中的Form標簽可以通過id、class、name屬性獲取，或者直接通過form標簽獲取。當然，也可以使用document.forms獲取HTML中所有表單元素，會返回一個NodeList對象。

屬性

說一個重要的

elements: document.forms[0].elements 返回類數組對象，包含該form表單下所有表單欄位。可以通過表單欄位的name屬性或者索引訪問.

let form = document.forms[0]
form.element[0] === form.element['index-0']

方法

在form表單上的方法有submit、reset方法。在現代web開發中，都會阻止form表單提交的預設行為。當沒有參數時，可以在不點擊按鈕的情況下將所有表單欄位的值向伺服器提交數據。通常，存在以下三種按鈕可以提交表單數據。

<input type="submit" value='提交' />
<button type='submit'>提交</button>
<input type="image" src='pic.png' />

事件

submit: 當給form表單綁定submit事件，在點擊圖像按鈕或者type為submit的按鈕會提交表單數據。此時可以通過事件對象阻止表單全局提交的預設行為。在提交表單時，為避免用戶多次點擊導致多次提交的問題，可以在提交後禁用提交按鈕。

form表單欄位

屬性

都比較簡單，有如下：

name
value
form: 指向當前表單元素，只讀。
type
readOnly
disabled
autofocus: 自動獲得焦點。HTML5新增屬性。<input type="text" autofocus />。支持此事件的瀏覽器包括IE10+、Chrome、Firefox。所以支持的瀏覽器的autofocus會返回true，不支持時會返回空字元串。

方法

focus()、blur()：通常會結合blur方法使用。比如在DOMContentLoaded事件之後讓某個input元素獲得焦點，讓用戶可以直接輸入。

document.addEventLitener('DOMContentLoaded', e => {
    let input = docuemnt.querySelector('.input-1')
    input.focus()
}, false)

事件

focus、blur事件：在實際業務中，可以結合使用focus和blur事件。如input節點獲得焦點時，改變input元素顏色。在失去焦點時，將背景顏色重置。

let input = document.querySelector('.input-0')
input.addEventListener('focus', e => {
    e.target.style.backgroundColor = '#ccc'
}, false)
input.addEventListener('blur', e => {
    e.target.style.backgroundColor = '#fff'
}, false)

change事件：對於input和textarea元素，當它們從獲得焦點到失去焦點並且value值發生改變時，才會觸發change事件。而對於select元素，只要value值發生改變時就會觸發change事件。換句話說，沒有失去焦點也會觸發change事件。這個細節需要註意。

文本框(input, textarea)

除了以上表單欄位的共有屬性和方法之外，文本框存在自己的一些屬性和操作文本的一些方法。

屬性

maxlength: 最大輸入長度
size: 文本框中能夠顯示的字元數
cols: textarea列數
rows: textarea行數
······· 以下均為HTML5新增的約束驗證API······
reqiured: 必填選項。
type
- email: 預設驗證
- url: url模式
- number: 僅能輸入數字
pattern: 實際上就是在HTML里使用正則表達式。IE10+以上瀏覽器支持。

checkValidity方法：在document.forms[0]上綁定此方法，可以檢測整個form表單欄位是否有效。如果有效，則返回true。否則返回false。

// type為number時，可以指定min,max,step(表示某個值得倍數)屬性
<input type="number" min='0' max='100' step='5' name='count'>
// 此時正則預設添加了^, $，即以下正則等於'^\d+$'
<input type='text' pattern='\d+'>

實際應用

選擇文本

1.select方法：input和textarea元素都支持selct方法。這個方法不接受任何參數，表示選擇某個文本框元素的所有文本

// 當input元素獲得焦點是選擇文本
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
    e.target.select()
}, false)

2.setSelectionRange方法：這個方法用於選擇部分文本內容。接受兩個參數，起始位置和結束位置。HTML5新增的方法。IE9+以上瀏覽器支持。

// 當input獲得焦點時，選擇文本中的第二個值
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
  let target = e.target
  console.log(target.setSelectionRange(1, 2))
}, false)

3.select事件：當文本框元素中的文本被選中時，就會觸發select事件。只要選中文本就會觸發，不需要全選。

4.selectionStart, selectionEnd屬性：這兩個屬性用於或者用戶選中的文本內容。因此，可以與select事件結合使用，獲取用戶選中的文本內容。HTML5新增的兩個屬性。IE9+以上瀏覽器支持。

let input = document.querySelector('.input-1')
input.addEventListener('select', e => {
    let target = e.target
    let start = target.selectionStart
    let end = target.selectionEnd
    console.log(target.value.slice(start, end))
}, false)

過濾輸入

文本框的過濾輸入主要是某些文本的輸入是有條件的。比如說需要input元素中只允許輸入數字。這時候就需要用到文本的過濾。基本思路如下

1.通過監聽keypress事件，判斷輸入時的字元是否是數字。通過charCode判斷。keypress事件會在用戶按下鍵盤上的【字元鍵】時觸發。

2.如果不是，則取消預設行為，即取消文本的輸入。

let input = document.querySelector('.input-1')
input.addEventListener('keypress', e => {
  let charCode = e.charCode
  if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
    e.preventDefault()
  }
}, false)

此方法通過charCode屬性來判斷用戶輸入的字元是否是數字字元，如果是則可以輸入，如果不是則禁止輸入。這裡要註意的是，不能通過input的value屬性來判斷。因為keydown和keypress事件會在value改變之前觸發，而keyup事件則是在value發生改變之後觸發。因此，keypress獲取value值是上一次的值，但是keypress事件可以獲取到按下鍵盤時的charCode屬性，然後通過String對象的fromCharCode轉成對應的字元，根據此字元做一次正則驗證即可。同時，charCode屬性只有在keypress事件才存在，在keydown和keyup事件中都會返回0。

自動切換焦點

這種應用主要用於手機號碼上。如手機號碼可以分為'334'的結構。因此可以創建三個input，當輸入完畢時自動切換焦點到下一個input上。

// 必須設置最大值
<input type="text" name='text1' maxlength="3">
<input type="text" name='text2' maxlength="3">
<input type="text" name='text3' maxlength="4">
// 當value的length等於maxleng時，發生跳轉
function judge (len, max, target, form) {
  if (len === max) {
    let length = form.elements.length
    for (let i = 0; i < length; i++) {
      if (target === form.elements[i]) {
        if (form.elements[i + 1]) {
          form.elements[i + 1].focus()
        }
      }
    }
  }
}
// 給三個input綁定keyup事件，通過事件代理方式。
document.addEventListener('keyup', e => {
  let target = e.target
  let form = target.form
  let len = target.value.length
  let maxLen = target.maxLength
  switch (target.name) {
    case 'text1':
      judge(len, maxLen, target, form)
      break
    case 'text2':
      judge(len, maxLen, target, form)
      break
    case 'text3':
      judge(len, maxLen, target, form)
      break
  }
}, false)

選擇框(select, option)

選擇框是通過select和option元素組合而成的。除了表單欄位共有的屬性和方法之外，在這兩個元素上提供了其他的屬性和方法。目的是為了更加方便的操作選擇框元素。

select元素

add(newOption, targetOption)：在select元素上有add方法，向select元素插入新的option元素。傳入兩個參數：新的option元素和目標option元素。
multiple屬性: 是否允許多項選擇。如果未添加此屬性，則select元素的type屬性為'select-one'。否則為'select-multiple'。
options屬性：取得該select元素下的所有options元素。返回一個類數組對象。
selectedIndex屬性: 選中options元素的索引值。
size屬性: 可見的行數
value屬性: 發送到伺服器的值，如果沒有這個屬性，則會取innerText的值。

option元素

index: 索引值
label: 當前選項的標簽
selected: 被選中的option元素
text: 文本
value: 發送到伺服器的值