jQuery 在焦点和失焦时改变背景颜色

在本文中，我们将介绍如何使用jQuery在输入框获得焦点和失去焦点时改变背景颜色。

背景

在Web开发中，有时我们需要在用户对输入框进行操作时改变其背景颜色，以提升用户体验或强调输入框的状态。

使用focus()和blur()方法

在jQuery中，我们可以使用focus()和blur()方法来监听输入框的焦点和失焦事件，并在事件发生时执行相应的操作，例如改变背景颜色。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Background Color Change</title>
  <style>
    .input-box {
      width: 200px;
      height: 30px;
      border: 1px solid #ccc;
      padding: 5px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (document).ready(function() {('.input-box').focus(function() {
        (this).css('background-color', 'yellow');
      });('.input-box').blur(function() {
        $(this).css('background-color', 'white');
      });
    });
  </script>
</head>
<body>
  <input type="text" class="input-box" placeholder="输入框">
</body>
</html>

在上述代码中，我们通过给输入框添加input-box类来选取所有的输入框元素，并使用focus()方法监听焦点事件，blur()方法监听失焦事件。当输入框获取焦点时，我们使用css()方法将背景颜色设置为黄色；当失去焦点时，我们将背景颜色恢复为白色。

通过运行上述代码，我们可以看到输入框在获取焦点时背景颜色变为黄色，在失去焦点时背景颜色变为白色。

修改背景颜色时的过渡效果

除了直接改变背景颜色，我们还可以使用jQuery的animate()方法为背景颜色添加过渡效果，使界面更加平滑。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Background Color Change with Transition</title>
  <style>
    .input-box {
      width: 200px;
      height: 30px;
      border: 1px solid #ccc;
      padding: 5px;
      transition: background-color 0.5s ease;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (document).ready(function() {('.input-box').focus(function() {
        (this).animate({ backgroundColor: "yellow" }, 500);
      });('.input-box').blur(function() {
        $(this).animate({ backgroundColor: "white" }, 500);
      });
    });
  </script>
</head>
<body>
  <input type="text" class="input-box" placeholder="输入框">
</body>
</html>

在上述代码中，我们通过给输入框添加input-box类来选取所有的输入框元素，并使用focus()方法监听焦点事件，blur()方法监听失焦事件。当输入框获取焦点时，我们使用animate()方法将背景颜色从当前颜色过渡到黄色，过渡时间为0.5秒；当失去焦点时，我们将背景颜色从当前颜色过渡到白色。

通过运行上述代码，我们可以看到输入框在获取焦点时背景颜色平滑过渡到黄色，在失去焦点时背景颜色平滑过渡到白色。

总结

在本文中，我们介绍了如何使用jQuery在输入框获得焦点和失去焦点时改变背景颜色。我们通过使用focus()和blur()方法监听输入框的焦点和失焦事件，并使用css()方法或animate()方法改变背景颜色。这种技术可以用于Web表单、登录页面等场景，提升用户交互体验和界面美观程度。希望本文对您理解和应用jQuery的背景颜色改变技术有所帮助。