JS 获取焦点事件和失去焦点事件|极客笔记

JS 获取焦点事件和失去焦点事件

在前端开发中，经常会涉及到处理用户与页面元素的交互行为，其中焦点事件就是其中之一。焦点事件分为两种，分别是获取焦点事件和失去焦点事件。在本文中，我们将详细介绍如何使用JavaScript来监听和处理这两种焦点事件。

获取焦点事件

获取焦点事件指的是当用户点击或通过键盘操作将焦点放在页面元素上时触发的事件。我们可以通过addEventListener方法来为页面元素添加获取焦点事件的监听器。

示例代码如下所示，该代码演示了如何为一个输入框添加获取焦点事件的监听器：

<!DOCTYPE html>
<html>
<head>
  <title>获取焦点事件示例</title>
</head>
<body>
  <input type="text" id="inputField" placeholder="请输入内容">
  <p id="output"></p>

  <script>
    const inputField = document.getElementById('inputField');
    const output = document.getElementById('output');

    inputField.addEventListener('focus', function() {
      output.textContent = '输入框已获取焦点';
    });
  </script>
</body>
</html>

在上面的示例中，我们首先通过document.getElementById方法获取了id为inputField的输入框元素和id为output的段落元素。然后使用addEventListener方法为输入框添加了focus事件的监听器，当输入框获得焦点时，会在段落元素中显示一段文字”输入框已获取焦点”。

失去焦点事件

失去焦点事件与获取焦点事件相对应，指的是当页面元素失去焦点时触发的事件。同样地，我们也可以使用addEventListener方法来为页面元素添加失去焦点事件的监听器。

下面的示例代码演示了如何为一个输入框添加失去焦点事件的监听器：

<!DOCTYPE html>
<html>
<head>
  <title>失去焦点事件示例</title>
</head>
<body>
  <input type="text" id="inputField" placeholder="请输入内容">
  <p id="output"></p>

  <script>
    const inputField = document.getElementById('inputField');
    const output = document.getElementById('output');

    inputField.addEventListener('blur', function() {
      output.textContent = '输入框已失去焦点';
    });
  </script>
</body>
</html>

在上面的示例中，我们同样通过document.getElementById方法获取了id为inputField的输入框元素和id为output的段落元素。然后使用addEventListener方法为输入框添加了blur事件的监听器，当输入框失去焦点时，会在段落元素中显示一段文字”输入框已失去焦点”。

实际应用

焦点事件在实际开发中有着广泛的应用，比如表单验证、自动完成和交互提示等。下面我们通过一个简单的示例来演示如何使用焦点事件实现一个简单的表单验证功能。

<!DOCTYPE html>
<html>
<head>
  <title>表单验证示例</title>
</head>
<body>
  <input type="text" id="username" placeholder="请输入用户名">
  <p id="message"></p>

  <script>
    const username = document.getElementById('username');
    const message = document.getElementById('message');

    username.addEventListener('blur', function() {
      if (username.value.length < 6) {
        message.textContent = '用户名长度不能少于6个字符';
        username.focus();
      } else {
        message.textContent = '';
      }
    });
  </script>
</body>
</html>

在上面的示例中，我们为输入框添加了失去焦点事件的监听器，当输入框失去焦点时，会判断用户名的长度是否小于6个字符，如果是则在段落元素中显示一条提示信息”用户名长度不能少于6个字符”，并将焦点重新定位到输入框上。否则，清空提示信息。