Javascript 表單：事件和方法提交

提交表單時，會觸發(fā) ?submit? 事件，它通常用于在將表單發(fā)送到服務(wù)器之前對表單進行校驗，或者中止提交，并使用 JavaScript 來處理表單。

form.submit() 方法允許從 JavaScript 啟動表單發(fā)送。我們可以使用此方法動態(tài)地創(chuàng)建表單，并將其發(fā)送到服務(wù)器。

讓我們看看它們的更多細節(jié)。

事件：submit

提交表單主要有兩種方式：

1. 第一種 —— 點擊 ?<input type="submit">? 或 ?<input type="image">?。
2. 第二種 —— 在 ?input? 字段中按下 ?Enter? 鍵。

這兩個行為都會觸發(fā)表單的 submit 事件。處理程序可以檢查數(shù)據(jù)，如果有錯誤，就顯示出來，并調(diào)用 event.preventDefault()，這樣表單就不會被發(fā)送到服務(wù)器了。

在下面的表單中：

1. 在文本字段中按下 ?Enter? 鍵。
2. 點擊 ?<input type="submit">?。

這兩種行為都會顯示 alert，而因為代碼中的 return false，表單不會被發(fā)送到別處：

<form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

?submit? 和 ?click? 的關(guān)系

在輸入框中使用 Enter 發(fā)送表單時，會在 <input type="submit"> 上觸發(fā)一次 click 事件。

這很有趣，因為實際上根本沒有點擊。

方法：submit

如果要手動將表單提交到服務(wù)器，我們可以調(diào)用 form.submit()。

這樣就不會產(chǎn)生 submit 事件。這里假設(shè)如果開發(fā)人員調(diào)用 form.submit()，就意味著此腳本已經(jīng)進行了所有相關(guān)處理。

有時該方法被用來手動創(chuàng)建和發(fā)送表單，如下所示：

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// 該表單必須在文檔中才能提交
document.body.append(form);

form.submit();

任務(wù)

模態(tài)框表單

重要程度: 5

創(chuàng)建一個函數(shù) showPrompt(html, callback)，該函數(shù)顯示一個表單，里面有消息 html，一個 input 字段和 OK/CANCEL 按鈕。

• 用戶應(yīng)該在文本字段中輸入一些內(nèi)容，然后按下 ?Enter? 鍵或點擊 OK 按鈕，然后 ?callback(value)? 就會被調(diào)用，參數(shù)為輸入的值。
• 否則，如果用戶按下 ?Esc? 鍵或點擊 CANCEL 按鈕，那么 ?callback(null)? 就會被調(diào)用。

在這兩種情況下，輸入過程都會結(jié)束，并移除表單。

要求：

• 表單應(yīng)該在窗口的正中心。
• 表單是 模態(tài)框（modal）。換句話說，在用戶關(guān)閉模態(tài)框之前，用戶無法與頁面的其它部分進行任何交互。
• 當(dāng)表單顯示后，焦點應(yīng)該在用戶需要進行輸入的 ?<input>? 輸入框中。
• 按鍵 ?Tab?/?Shift+Tab? 應(yīng)該能在表單字段之間切換焦點，不允許焦點離開表單字段到頁面的其它元素上。

使用示例：

showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});

P.S. 源文檔有給表單設(shè)定了固定位置的 HTML/CSS，但是做成模態(tài)框的方式取決于你。

打開一個任務(wù)沙箱。

解決方案

可以使用一個覆蓋整個窗口的半透明 <div id="cover-div"> 來實現(xiàn)模態(tài)框窗口，如下所示：

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

由于 <div> 遮蓋了所有的元素，所以它會獲取到所有的點擊，而它下面的元素就無法獲取這些點擊了。

我們也可以設(shè)置 body.style.overflowY='hidden' 來阻止頁面的滾動。

表單元素不應(yīng)該在 <div> 中，而應(yīng)在它下邊，因為我們不想讓表單具有 opacity 屬性。

使用沙箱打開解決方案。