Javascript 表单：事件和方法提交

提交表单时，会触发 ​submit​ 事件，它通常用于在将表单发送到服务器之前对表单进行校验，或者中止提交，并使用 JavaScript 来处理表单。

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

让我们看看它们的更多细节。

事件：submit

提交表单主要有两种方式：

1. 第一种 —— 点击 ​<input type="submit">​ 或 ​<input type="image">​。
2. 第二种 —— 在 ​input​ 字段中按下 ​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>

​submit​ 和 ​click​ 的关系

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

这很有趣，因为实际上根本没有点击。

方法：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);
});

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 属性。

使用沙箱打开解决方案。