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

JS 获取焦点和失去焦点

JavaScript 是一种用于网页开发的脚本语言，广泛应用于前端开发。在网页中，用户可以通过鼠标点击或键盘输入与页面交互，而获取焦点和失去焦点是其中常见的交互操作之一。在本文中，我们将介绍如何使用 JavaScript 来获取焦点和失去焦点，以及在网页中实现一些常见的交互效果。

获取焦点

获取焦点是指让一个元素成为当前页面中唯一可以与用户交互的元素，用户可以通过键盘输入或鼠标点击来操作该元素。在 JavaScript 中，我们可以使用 focus() 方法来让一个元素获取焦点。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Get Focus Example</title>
</head>
<body>
  <input type="text" id="inputField">
  <button onclick="focusInput()">Focus Input</button>

  <script>
    function focusInput() {
      document.getElementById("inputField").focus();
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个文本输入框和一个按钮，当用户点击按钮时，输入框会获取焦点。运行这段代码，然后点击按钮，就可以看到输入框被选中，可以输入文本了。

失去焦点

失去焦点是指一个元素不再处于当前页面中唯一可以与用户交互的状态。在 JavaScript 中，我们可以使用 blur() 方法来让一个元素失去焦点。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Lose Focus Example</title>
</head>
<body>
  <input type="text" id="inputField">
  <button onclick="blurInput()">Blur Input</button>

  <script>
    function blurInput() {
      document.getElementById("inputField").blur();
    }
  </script>
</body>
</html>

在这个示例中，我们同样创建了一个文本输入框和一个按钮，当用户点击按钮时，输入框会失去焦点。运行这段代码，然后点击按钮，就可以看到输入框不再处于选中状态了。

常见的焦点处理

除了简单地让元素获取或失去焦点外，我们还可以结合事件处理函数来实现一些更复杂的交互效果。下面是一个示例，当用户在输入框中输入内容时，动态改变输入框的背景颜色：

<!DOCTYPE html>
<html>
<head>
  <title>Focus Event Example</title>
</head>
<body>
  <input type="text" id="inputField" onfocus="changeColor('yellow')" onblur="changeColor('white')">

  <script>
    function changeColor(color) {
      document.getElementById("inputField").style.backgroundColor = color;
    }
  </script>
</body>
</html>

在这个示例中，我们给输入框添加了 onfocus 和 onblur 事件处理函数，当输入框获取焦点时，背景颜色会变为黄色，当失去焦点时，颜色则会变回白色。运行这段代码，在输入框中输入内容并切换焦点时，就可以看到背景颜色的变化。

通过以上示例，我们可以看到如何使用 JavaScript 来获取焦点和失去焦点，并结合事件处理函数实现一些常见的焦点处理效果。在实际开发中，可以根据具体需求来灵活运用这些技巧，为用户提供更好的交互体验。