js判断input获取焦点

基础概念

在JavaScript中，判断一个<input>元素是否获取焦点可以通过监听focus和blur事件来实现。当元素获得焦点时，会触发focus事件；当元素失去焦点时，会触发blur事件。

类型与应用场景

类型：主要涉及事件监听和处理。
应用场景：
- 表单验证：在用户开始输入之前进行即时验证。
- 动态样式变化：改变输入框的边框颜色或显示辅助图标。
- 自动完成或搜索建议：当输入框聚焦时显示建议列表。

示例代码

以下是一个简单的示例，展示如何使用JavaScript来判断<input>元素是否获取焦点，并据此改变输入框的边框颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Focus Example</title>
<style>
  .focused {
    border: 2px solid blue;
  }
</style>
</head>
<body>

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

<script>
  // 获取input元素
  var inputElement = document.getElementById('myInput');

  // 定义一个函数来添加或移除聚焦样式
  function toggleFocusStyle(isFocused) {
    if (isFocused) {
      inputElement.classList.add('focused');
    } else {
      inputElement.classList.remove('focused');
    }
  }

  // 监听focus事件
  inputElement.addEventListener('focus', function() {
    toggleFocusStyle(true);
  });

  // 监听blur事件
  inputElement.addEventListener('blur', function() {
    toggleFocusStyle(false);
  });
</script>

</body>
</html>