HTML中点击标签页时如何刷新页面/清空输入框并设置自动聚焦

嘿，我来帮你搞定这个问题！你的核心需求是切换标签页时清空对应输入框的内容，同时让该输入框自动获得焦点，咱们只需要修改openTab函数的逻辑就能轻松实现。

问题分析 #

你原来的代码里，openTab函数最后同时给三个输入框都加了focus()，这会导致最后一个输入框抢焦点，而且完全没有清空输入框的逻辑。咱们要做的是：每次切换到某个标签页时，只操作该标签页对应的输入框——清空它的值，然后让它聚焦。

修改后的完整代码 #

下面是调整后的代码，主要修改了<script>部分的逻辑，同时移除了输入框上多余的autofocus属性：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'One')" id="defaultOpen">One</button>
  <button class="tablinks" onclick="openTab(event, 'Two')">Two</button>
  <button class="tablinks" onclick="openTab(event, 'Three')">Three</button>
</div>

<div id="One" class="tabcontent">
  <h3>One</h3>
  One : <input type="number" min="0.0" id="txtOne" />
</div>

<div id="Two" class="tabcontent">
  <h3>Two</h3>
  Two : <input type="number" min="0.0" id="txtTwo" />
</div>

<div id="Three" class="tabcontent">
  <h3>Three</h3>
  Three : <input type="number" min="0.0" id="txtThree" />
</div>

<script>
function openTab(evt, Name) {
  var i, tabcontent, tablinks;
  // 隐藏所有标签内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有标签按钮的active类
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示当前标签内容，标记按钮为active
  document.getElementById(Name).style.display = "block";
  evt.currentTarget.className += " active";
  
  // 关键修改：获取当前标签对应的输入框，清空并聚焦
  const inputElement = document.getElementById("txt" + Name);
  if (inputElement) {
    inputElement.value = ""; // 清空输入框内容
    inputElement.focus();    // 让输入框自动获得焦点
  }
}
// 默认打开第一个标签
document.getElementById("defaultOpen").click();
</script>

</body>
</html>

关键修改点说明 #

1. 移除了输入框的autofocus属性：避免默认自动聚焦和JS手动聚焦产生冲突，统一由JS控制焦点逻辑。
2. 精准定位输入框：根据当前标签名Name拼接出对应输入框的ID（比如标签名是One，对应输入框ID是txtOne），不用逐个判断，逻辑更简洁。
3. 添加清空+聚焦逻辑：每次切换标签时，先清空对应输入框的内容，再让它获得焦点，完美匹配你的需求。

这样修改后，每次点击任意标签页，对应的输入框都会被清空并自动聚焦，完全符合你的预期~

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