Javascript 表單：事件和方法提交

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

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

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

事件：submit

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

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

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

在下面的表單中：

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

這兩種行為都會(huì)顯示 alert，而因?yàn)榇a中的 return false，表單不會(huì)被發(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ā)送表單時(shí)，會(huì)在 <input type="submit"> 上觸發(fā)一次 click 事件。

這很有趣，因?yàn)閷?shí)際上根本沒(méi)有點(diǎn)擊。

方法：submit

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

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

有時(shí)該方法被用來(lái)手動(dòng)創(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)建一個(gè)函數(shù) showPrompt(html, callback)，該函數(shù)顯示一個(gè)表單，里面有消息 html，一個(gè) input 字段和 OK/CANCEL 按鈕。

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

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

要求：

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

使用示例：

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

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

打開(kāi)一個(gè)任務(wù)沙箱。

解決方案

可以使用一個(gè)覆蓋整個(gè)窗口的半透明 <div id="cover-div"> 來(lái)實(shí)現(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> 遮蓋了所有的元素，所以它會(huì)獲取到所有的點(diǎn)擊，而它下面的元素就無(wú)法獲取這些點(diǎn)擊了。

我們也可以設(shè)置 body.style.overflowY='hidden' 來(lái)阻止頁(yè)面的滾動(dòng)。

表單元素不應(yīng)該在 <div> 中，而應(yīng)在它下邊，因?yàn)槲覀儾幌胱尡韱尉哂?nbsp;opacity 屬性。

使用沙箱打開(kāi)解決方案。