如何在侧边导航栏（sidenav）打开时自动聚焦文本框

我懂你碰到的麻烦了——你用autofocus属性想让侧边栏打开时自动聚焦文本框，但完全没效果，还得保证和现有的ESC关闭、S打开的键盘快捷键兼容对吧？这问题其实很好解决，咱们一步步来：

问题根源 #

autofocus属性只会在页面首次加载时尝试聚焦一次，而你的侧边栏初始是隐藏状态（宽度为0），浏览器会直接忽略这个不可见元素的聚焦请求。等你后续通过JS打开侧边栏时，这个属性不会再次触发，所以自然没效果。

解决方案 #

我们需要用JavaScript手动在侧边栏打开后触发聚焦，同时兼顾键盘快捷键的逻辑：

1. 给文本框添加唯一ID：方便我们在JS里精准获取它，去掉没用的autofocus属性：

<input type="text" id="searchInput"/>

2. 修改openNav函数，添加手动聚焦逻辑：
   因为侧边栏有CSS过渡动画（0.5s），直接聚焦可能因为元素还没完全显示而失败，所以加个短暂延迟确保动画完成：

function openNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "250px";
  // 延迟100ms，等过渡动画进入稳定状态后再聚焦
  setTimeout(() => {
    document.getElementById("searchInput").focus();
  }, 100);
}

3. 优化closeNav函数（可选但推荐）：
   当按ESC关闭侧边栏时，让文本框失焦，避免焦点留在隐藏元素里导致后续键盘操作异常：

function closeNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "0";
  document.getElementById("searchInput").blur();
}

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#"><input type="text" id="searchInput"/></a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "250px";
  setTimeout(() => {
    document.getElementById("searchInput").focus();
  }, 100);
}

function closeNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "0";
  document.getElementById("searchInput").blur();
}

$(document).keyup(function(e) {
  if (e.keyCode == 27) {closeNav()} // escape
  if (e.keyCode == 83) {openNav()} //s
});
</script>

</body>
</html>

效果验证 #

• 点击菜单按钮打开侧边栏：文本框会自动获得焦点
• 按S键打开侧边栏：同样会自动聚焦文本框
• 按ESC键关闭侧边栏：侧边栏收起，文本框失焦，不会干扰后续操作

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