在JavaScript中处理表單
發現在HTML和JavaScript中處理表單的基礎知識 表單是HTML和網頁平台的一個非常重要的組成部分。它們允許用戶與頁面互動，並可以… 搜索網站上的內容 觸發過濾器以縮小結果頁面 發送信息 等等。 默認情況下，表單將其內容提交到服務器端點，默認情況下是頁面URL本身： <form> ... <input type="submit"> </form> 我們可以通過設置表單元素的 action 屬性來覆蓋此行為，使用由 method 屬性定義的HTML方法，默認為 GET： <form action="/contact" method="POST"> ... <input type="submit"> </form> 點擊提交輸入元素後，瀏覽器會向同一域（協議、域名和端口）的 /contact URL 發送一個POST請求。 使用JavaScript，我們可以攔截此事件，異步提交表單（使用XHR和Fetch），還可以對單個表單元素上的事件做出反應。 攔截表單提交事件 我剛剛描述了表單的默認行為，未使用JavaScript。 要開始使用JavaScript與表單一起工作，您需要在表單元素上攔截 submit 事件： const form = document.querySelector('form') form.addEventListener('submit', event => { // 檢測到提交事件 }) 現在，在提交事件處理程序函數內部，我們調用 event.preventDefault() 方法來阻止默認行為，避免表單提交重新加載頁面： const form = document.querySelector('form') form.addEventListener('submit', event => { // 檢測到提交事件 event.preventDefault() }) 此時，單擊表單中的提交事件按鈕將不會做任何事情，除了讓我們控制。 處理輸入元素事件 我們可以在表單元素上監聽許多事件 input：當元素值更改時，在表單元素上觸發 change：當元素值更改時，在表單元素上觸發。對於文本 input 元素和 textarea，它僅在元素失去焦點時觸發一次（每輸入個字元不觸發一次） cut：當用戶從表單元素中剪切文本時觸發 copy：當用戶從表單元素中複製文本時觸發 paste：當用戶將文本粘貼到表單元素中時觸發 focus：當表單元素獲得焦點時觸發 blur：當表單元素失去焦點時觸發 這裡有一個Codepen上的示例表單演示：...