点击网页空白区域时仍聚焦input输入框的实现方案

要实现点击页面空白处就聚焦到你的搜索输入框，只需要通过JavaScript监听页面的点击事件，判断点击位置后触发输入框的聚焦方法就行，结合你的现有代码，具体做法如下：

现有HTML代码（无需修改，确保ID唯一即可） #

<input type="text" class="form-control srch-bar" id="myInput" onkeyup="myFunction()" title="Type in a name" autofocus>

添加JavaScript核心逻辑 #

在页面末尾或者<script>标签里加入这段代码：

// 获取搜索输入框元素
const searchInput = document.getElementById('myInput');

// 监听整个文档的点击事件
document.addEventListener('click', function(e) {
  // 只有当点击的不是输入框本身时，才触发聚焦
  if (!searchInput.contains(e.target)) {
    searchInput.focus();
  }
});

额外优化：排除特定交互元素 #

如果你的页面上有按钮、导航这类需要正常点击交互的元素，不想让点击它们时也触发输入框聚焦，可以给这些元素加个class（比如no-focus-trigger），然后修改判断逻辑：

document.addEventListener('click', function(e) {
  let triggerFocus = true;
  
  // 检查是否点击了需要排除的元素
  if (e.target.closest('.no-focus-trigger')) {
    triggerFocus = false;
  }
  
  // 同时排除输入框本身
  if (triggerFocus && !searchInput.contains(e.target)) {
    searchInput.focus();
  }
});

确保代码在DOM加载后执行 #

如果你的JavaScript是放在页面头部的，记得把代码包在DOMContentLoaded事件里，避免找不到输入框元素：

document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('myInput');
  
  document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target)) {
      searchInput.focus();
    }
  });
});

内容的提问来源于stack exchange，提问作者user20502480