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

JS失去焦点事件

在前端开发中，除了用户输入内容之外，表单元素还会涉及到焦点的改变。当用户在一个输入框输入完内容后，点击其他地方或按下Tab键，该输入框就会失去焦点，这时就会触发失去焦点事件。在JavaScript中，我们可以通过监听失去焦点事件来实现一些功能，比如输入框内容格式验证、实时保存用户输入内容等。

基本用法

在HTML中，我们可以通过addEventListener方法来监听失去焦点事件。例如，我们可以给一个输入框添加失去焦点事件监听器：

<input type="text" id="input">

<script>
  document.getElementById('input').addEventListener('blur', function() {
    console.log('输入框失去焦点');
  });
</script>

上面的代码中，当输入框input失去焦点时，会在控制台打印输入框失去焦点。这样就实现了简单的失去焦点事件监听。

多个输入框监听

如果我们有多个输入框需要监听失去焦点事件，可以使用循环来为它们添加事件监听器：

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">

<script>
  var inputs = document.querySelectorAll('input');
  inputs.forEach(function(input) {
    input.addEventListener('blur', function() {
      console.log(input.id + '失去焦点');
    });
  });
</script>

上面的代码中，我们通过querySelectorAll方法来选择所有的输入框元素，然后使用forEach方法为每一个输入框添加失去焦点事件监听器。当任意一个输入框失去焦点时，控制台都会打印该输入框的id和失去焦点。

实际应用

失去焦点事件可以用于实现一些实际应用场景。例如，我们可以在输入框失去焦点时对输入的内容进行验证，比如邮箱格式验证：

<input type="email" id="email" placeholder="请输入邮箱">

<script>
  var emailInput = document.getElementById('email');
  emailInput.addEventListener('blur', function() {
    var email = emailInput.value;
    var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

    if (!pattern.test(email)) {
      alert('请输入有效的邮箱地址');
      emailInput.focus();
    }
  });
</script>

上面的代码中，当邮箱输入框失去焦点时，会先获取输入的邮箱地址，然后使用正则表达式进行验证。如果邮箱地址不符合要求，则会弹出提示框并重新聚焦到邮箱输入框，让用户重新输入。