JavaScript表單

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: 發送到服務器的值