失去焦点的 JavaScript - HTML

在 HTML 中，失去焦点指的是用户将焦点从一个元素转移到另一个元素或页面外部时发生的状态变化。当用户从一个输入框或选择框移动到另一个元素时，产生这种状态变化。JavaScript 可以捕获这种状态并自动执行代码，以实现各种交互效果。

实现失去焦点事件

要实现失去焦点事件，需要监控某个元素的失去焦点事件。在 HTML 中，可以使用 onblur 属性绑定对应的事件处理函数。例如：

<input type="text" onblur="console.log('文本框失去焦点')">

以上代码会在用户将焦点从文本框移走时，在控制台输出相应消息。

也可以使用 JavaScript 代码动态绑定事件处理函数，例如：

<input type="text" id="myInput">
<script>
  const input = document.querySelector('#myInput')
  input.addEventListener('blur', () => {
    console.log('文本框失去焦点')
  })
</script>

以上代码使用 addEventListener 方法绑定了一个失去焦点事件处理函数。当用户将焦点从文本框移走时，事件处理函数会在控制台输出相应消息。

失去焦点事件的应用

失去焦点事件可以用于许多交互场景，例如：

自动保存表单

当用户在表单中输入数据时，可以对焦点失去事件进行监听，自动保存表单数据。

<form>
  <input type="text" id="name">
  <input type="text" id="email">
</form>
<script>
  const form = document.querySelector('form')
  form.addEventListener('blur', () => {
    // 保存表单数据到本地存储或服务器
  })
</script>

在上述示例中，当用户从输入框移动到表单外部时，事件处理函数会自动触发，将表单数据保存到本地存储或服务器，实现了自动保存表单的交互效果。

验证表单数据

在用户提交表单之前，可以通过监听输入框的失去焦点事件，对表单数据进行格式验证。例如，可以检查 Email 地址的格式是否正确。

<form onsubmit="submitForm(event)">
  <input type="text" id="name">
  <input type="email" id="email" onblur="validateEmail()">
</form>
<script>
  function validateEmail() {
    const input = document.querySelector('#email')
    const regex = /\S+@\S+\.\S+/
    const isValid = regex.test(input.value)
    if (!isValid) {
      alert('Email 格式不正确')
    }
  }
  function submitForm(event) {
    // 防止表单提交，进行额外处理......
  }
</script>

在上述示例中，当用户离开 Email 输入框时，事件处理函数会自动触发，检查 Email 地址的格式是否正确。如果格式不正确，则弹出警告框提示用户。当用户提交表单时，通过 onsubmit 属性调用 submitForm 函数进行进一步处理。