focus/blur 事件

一起看海

当元素聚焦时，会触发 focus 事件，当元素失去焦点时，会触发 blur 事件。

让我们使用它们来校验一个 input 字段。

在下面这个示例中：

blur 事件处理程序检查这个字段是否输入了电子邮箱，如果没有输入，则显示一个 error。
focus 事件处理程序隐藏 error 信息（在 blur 事件处理程序上会被再检查一遍）：
<style>
  .invalid { border-color: red; }
  #error { color: red }
</style>

Your email please: <input type="email" id="input">

<div id="error"></div>

<script>
input.onblur = function() {
  if (!input.value.includes('@')) { // not email
    input.classList.add('invalid');
    error.innerHTML = 'Please enter a correct email.'
  }
};

input.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // 移除 "error" 指示，因为用户想要重新输入一些内容
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};
</script>

现代 HTML 允许我们使用 input 特性（attribute）进行许多验证：required，pattern 等。有时它们正是我们所需要的。当我们需要更大的灵活性时，可以使用 JavaScript。如果数据是正确的，我们可以把它自动发送到服务器。