如何在检测到文本输入框内容清空时刷新页面？

核心思路 #

要实现“当搜索框内容被完全删除清空时刷新页面”，需要在输入框的input和keyup事件中监听内容变化，判断输入框是否从非空状态变为空状态，避免页面初始加载时因输入框为空误触发刷新，同时保留原有的搜索结果区域显示逻辑。

修正后的完整代码 #

首先修正原代码中input标签重复的type属性，再添加清空检测与刷新逻辑：

<input type="search" class="search" id="myInput" placeholder="Search">
<script type="text/javascript">
    let hadContent = false;
    $("[type='search']").on("input keyup",(e) => {
         const inputVal = e.target.value.trim();
         // 保留原有的切换结果区域active类的逻辑
         $("#results").toggleClass("active", inputVal !== "");
         
         // 仅当输入框从有内容变为完全清空时，触发页面刷新
         if (hadContent && inputVal === "") {
             location.reload();
             hadContent = false;
         }
         
         // 更新状态：只要输入框有内容，标记为已输入过内容
         if (inputVal !== "") {
             hadContent = true;
         }
    });
</script>

<div class="results" id="results">
    <!-- 搜索结果内容 -->
</div>

代码说明 #

• trim()方法用于处理用户输入空格后删除的情况，确保真正的“完全清空”才触发刷新。
• hadContent变量用于跟踪输入框是否曾经有内容，避免页面加载时因输入框默认为空而无限刷新。
• location.reload()是原生JS的页面刷新方法，调用后会重新加载当前页面。

简化版（无历史内容判断） #

如果不需要判断是否曾经输入过内容，只要输入框为空就刷新（注意：会导致页面加载后立即刷新，仅适用于特殊场景）：

$("[type='search']").on("input keyup",(e) => {
     const inputVal = e.target.value.trim();
     $("#results").toggleClass("active", inputVal !== "");
     if (inputVal === "") {
         location.reload();
     }
});

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