提交表单时,会触发 submit
事件,它通常用于在将表单发送到服务器之前对表单进行校验,或者中止提交,并使用 JavaScript 来处理表单。
form.submit()
方法允许从 JavaScript 启动表单发送。我们可以使用此方法动态地创建表单,并将其发送到服务器。
让我们看看它们的更多细节。
事件:submit
提交表单主要有两种方式:
- 第一种 —— 点击
<input type="submit">
或<input type="image">
。 - 第二种 —— 在
input
字段中按下 Enter 键。
这两个行为都会触发表单的 submit
事件。处理程序可以检查数据,如果有错误,就显示出来,并调用 event.preventDefault()
,这样表单就不会被发送到服务器了。
在下面的表单中:
- 在文本字段中按下 Enter 键。
- 点击
<input type="submit">
。
这两种行为都会显示 alert
,而因为代码中的 return false
,表单不会被发送到别处:
<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
的关系
在输入框中使用 Enter 发送表单时,会在 <input type="submit">
上触发一次 click
事件。
这很有趣,因为实际上根本没有点击。
这是一个示例:
<form onsubmit="return false">
<input type="text" size="30" value="Focus here and press enter">
<input type="submit" value="Submit" onclick="alert('click')">
</form>
方法:submit
如果要手动将表单提交到服务器,我们可以调用 form.submit()
。
这样就不会产生 submit
事件。这里假设如果开发人员调用 form.submit()
,就意味着此脚本已经进行了所有相关处理。
有时该方法被用来手动创建和发送表单,如下所示:
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();
任务
模态框表单
重要程度: 5
创建一个函数 showPrompt(html, callback)
,该函数显示一个表单,里面有消息 html
,一个 input
字段和 OK/CANCEL
按钮。
- 用户应该在文本字段中输入一些内容,然后按下 Enter 键或点击 OK 按钮,然后
callback(value)
就会被调用,参数为输入的值。 - 否则,如果用户按下 Esc 键或点击 CANCEL 按钮,那么
callback(null)
就会被调用。
在这两种情况下,输入过程都会结束,并移除表单。
要求:
- 表单应该在窗口的正中心。
- 表单是 模态框(modal)。换句话说,在用户关闭模态框之前,用户无法与页面的其它部分进行任何交互。
- 当表单显示后,焦点应该在用户需要进行输入的
<input>
输入框中。 - 按键 Tab/Shift+Tab 应该能在表单字段之间切换焦点,不允许焦点离开表单字段到页面的其它元素上。
使用示例:
showPrompt("Enter something<br>...smart :)", function(value) {
alert(value);
});
使用 iframe 嵌入的一个示例:
P.S. 源文档有给表单设定了固定位置的 HTML/CSS,但是做成模态框的方式取决于你。
解决方案
可以使用一个覆盖整个窗口的半透明 <div id="cover-div">
来实现模态框窗口,如下所示:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}
由于 <div>
遮盖了所有的元素,所以它会获取到所有的点击,而它下面的元素就无法获取这些点击了。
我们也可以设置 body.style.overflowY='hidden'
来阻止页面的滚动。
表单元素不应该在 <div>
中,而应在它下边,因为我们不想让表单具有 opacity
属性。