在JavaScript中處理表單

探索使用HTML和JavaScript中的表單的基礎知識

表單是HTML和Web平台的極其重要的組成部分。它們使用戶可以與頁面進行交互,並且

  • 在網站上搜索內容
  • 觸發過濾器以修剪結果頁面
  • 發送信息

還有更多。

默認情況下,表單將其內容提交到服務器端端點,默認情況下是頁面URL本身:

<form>
  ...
  <input type="submit">
</form>

我們可以通過設置action表單元素的屬性,使用由method屬性,默認為GET

<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>

點擊提交輸入元素後,瀏覽器向POST請求/contact相同來源(協議,域和端口)上的URL。

使用JavaScript,我們可以攔截此事件,以異步方式提交表單(使用XHR拿來),我們還可以對單個表單元素上發生的事件做出反應。

攔截表單提交事件

我只是描述了沒有JavaScript的表單的默認行為。

為了開始使用JavaScript處理表單,您需要攔截submit表單元素上的事件:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})

現在在Submit事件處理函數中,我們將event.preventDefault()防止默認行為並避免表單提交以重新加載頁面的方法:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

此時,單擊表單中的“提交事件”按鈕將不會執行任何操作,除了為我們提供控件。

處理輸入元素事件

我們可以在表單元素中監聽許多事件

  • input更改元素值時在表單元素上觸發
  • change當元素值更改時在表單元素上觸發。在文字的情況下input元素和textarea,當元素失去焦點時,它只會被觸發一次(不適用於鍵入的每個單個字符)
  • cut當用戶從表單元素剪切文本時觸發
  • copy用戶從表單元素複製文本時觸發
  • paste用戶將文本粘貼到表單元素中時觸發
  • focus當表單元素獲得焦點時觸發
  • blur當表單元素失去焦點時觸發

這是Codepen上的示例表單演示:

看筆表單事件演示由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!