/

在JavaScript中处理表單

在JavaScript中处理表單

發現在HTML和JavaScript中處理表單的基礎知識

表單是HTML和網頁平台的一個非常重要的組成部分。它們允許用戶與頁面互動，並可以…

  • 搜索網站上的內容
  • 觸發過濾器以縮小結果頁面
  • 發送信息

等等。

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

1
2
3
4
<form>
 ...
 <input type="submit">
</form>

我們可以通過設置表單元素的 action 屬性來覆蓋此行為，使用由 method 屬性定義的HTML方法，默認為 GET：

1
2
3
4
<form action="/contact" method="POST">
 ...
 <input type="submit">
</form>

點擊提交輸入元素後，瀏覽器會向同一域（協議、域名和端口）的 /contact URL 發送一個POST請求。

使用JavaScript，我們可以攔截此事件，異步提交表單（使用XHR和Fetch），還可以對單個表單元素上的事件做出反應。

攔截表單提交事件

我剛剛描述了表單的默認行為，未使用JavaScript。

要開始使用JavaScript與表單一起工作，您需要在表單元素上攔截 submit 事件：

1
2
3
4
const form = document.querySelector('form')
form.addEventListener('submit', event => {
 // 檢測到提交事件
})

現在，在提交事件處理程序函數內部，我們調用 event.preventDefault() 方法來阻止默認行為，避免表單提交重新加載頁面：

1
2
3
4
5
const form = document.querySelector('form')
form.addEventListener('submit', event => {
 // 檢測到提交事件
 event.preventDefault()
})

此時，單擊表單中的提交事件按鈕將不會做任何事情，除了讓我們控制。

處理輸入元素事件

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

  • input：當元素值更改時，在表單元素上觸發
  • change：當元素值更改時，在表單元素上觸發。對於文本 input 元素和 textarea，它僅在元素失去焦點時觸發一次（每輸入個字元不觸發一次）
  • cut：當用戶從表單元素中剪切文本時觸發
  • copy：當用戶從表單元素中複製文本時觸發
  • paste：當用戶將文本粘貼到表單元素中時觸發
  • focus：當表單元素獲得焦點時觸發
  • blur：當表單元素失去焦點時觸發

這裡有一個Codepen上的示例表單演示：

参考：Codepen上的表單事件示例