当提交表单时,submit 事件就会触发,它通常用于在将结果发送到服务器之前进行表单校验,或者中断提交,然后用 JavaScript 来处理。

form.submit() 方法允许从 JavaScript 里发送表单。使用此方法,我们可以动态地创建表单,并将其发送给服务器。

接下来我们来看更多的细节。

事件:submit

提交表单有两种方法:

  1. 第一种 — 点击 <input type="submit"> 或者 <input type="image">
  2. 第二种 — 在输入框内按下 Enter 回车键。

两种行为都可以触发表单的 submit 事件。处理器可以检查数据,如果有错误,就显示出来,并且调用 event.preventDefault(),这样表单就不会再提交给服务端了。

在下面的表单中:

  1. 在文本输入框内按下 Enter 回车键。
  2. 点击 <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>
submitclick 的关系

当在输入框中使用 Enter 发送表单时,click 事件在 <input type="submit"> 上也会触发。

这是相当有趣的,因为实际上我们没有点击任何元素。

这里有一个例子:

<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 中
document.body.append(form);

form.submit();

任务

重要程度: 5

创建一个函数 showPrompt(html, callback),展示一个表单,里面有消息 html、一个文本输入框和 OK/CANCEL 按钮。

  • 让用户在文本输入框中输入一些东西,然后按下 Enter 回车键或者点击 OK 按钮,然后 callback(value) 就会被调用,参数是输入的值。
  • 另外,如果用户按下 Esc 按键或者点击 CANCEL 按钮,那么 callback(null) 就会被调用。

在这两种情况下,都结束了输入过程并移除了表单。

要求:

  • 表单应该在窗口的正中央。
  • 表单是模态框。也就是说,直到模态框关闭之前,页面的其它地方不能有任何交互。
  • 当表单出现后,焦点应该在用户要输入的 <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 属性。

使用沙箱打开解决方案。

教程路线图

评论

在评论之前先阅读本内容…
  • 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
  • 使用 <code> 标签插入几行代码,对于多行代码 — 可以使用 <pre>,对于超过十行的代码 — 建议使用沙箱(plnkrJSBincodepen 等)。
  • 如果你无法理解文章中的内容 — 请详细说明。