博客

jQuery blur()方法

  • Post category:jquery

jQuery blur()方法是用于在元素失去焦点时触发事件的方法。当用户从一个元素中移开时，该元素就会失去焦点。该方法可以用于验证表单输入，或在用户完成输入后执行某些操作。

以下是jQuery blur()方法的详细攻略：

语法

$(selector).blur(function)

参数

  • function：必需。规定当元素失去焦点时要运行的函数。

示例1：验证表单输入

以下示例演示了如何使用jQuery blur()方法验证表单输入：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Blur Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Submit">
  </form>

  <script>
    $(document).ready(function() {
      // Validate the username field
      $('#username').blur(function() {
        if ($(this).val().length < 5) {
          alert('Username must be at least 5 characters long!');
        }
      });

      // Validate the password field
      $('#password').blur(function() {
        if ($(this).val().length < 8) {
          alert('Password must be at least 8 characters long!');
        }
      });
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个表单，并使用jQuery blur()方法验证了用户名和密码字段。当用户从这些字段中移开时，我们检查它们的值是否符合要求。如果不符合要求，我们弹出一个警告框。

示例2：执行操作

以下示例演示了如何使用jQuery blur()方法在用户完成输入后执行某些操作：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Blur Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>

  <script>
    $(document).ready(function() {
      // Show a message when the user finishes entering their name
      $('#name').blur(function() {
        alert('Thank you for entering your name!');
      });

      // Show a message when the user finishes entering their email
      $('#email').blur(function() {
        alert('Thank you for entering your email!');
      });
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个表单，并使用jQuery blur()方法在用户完成输入后显示了一条消息。当用户从名称或电子邮件字段中移开时，我们弹出一个消息。

注意事项

  • blur()方法只应用于可接受焦点的元素，例如<input>、<textarea>和<a>等元素。
  • blur()方法不会触发change事件。如果要在元素的值更改时触发事件，请使用change()方法。
Tags: