W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
提交表單時(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é)。
提交表單主要有兩種方式:
<input type="submit">
? 或 ?<input type="image">
?。input
? 字段中按下 ?Enter
? 鍵。這兩個(gè)行為都會(huì)觸發(fā)表單的 submit
事件。處理程序可以檢查數(shù)據(jù),如果有錯(cuò)誤,就顯示出來(lái),并調(diào)用 event.preventDefault()
,這樣表單就不會(huì)被發(fā)送到服務(wù)器了。
在下面的表單中:
Enter
? 鍵。<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)擊。
如果要手動(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();
創(chuàng)建一個(gè)函數(shù) showPrompt(html, callback)
,該函數(shù)顯示一個(gè)表單,里面有消息 html
,一個(gè) input
字段和 OK/CANCEL
按鈕。
Enter
? 鍵或點(diǎn)擊 OK 按鈕,然后 ?callback(value)
? 就會(huì)被調(diào)用,參數(shù)為輸入的值。Esc
? 鍵或點(diǎn)擊 CANCEL 按鈕,那么 ?callback(null)
? 就會(huì)被調(diào)用。在這兩種情況下,輸入過(guò)程都會(huì)結(jié)束,并移除表單。
要求:
<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)框的方式取決于你。
可以使用一個(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
屬性。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: