单页网站移动端搜索跳转异常：首次点击仅关键盘无法定位div

问题重现 #

单页网站产品搜索功能，桌面端点击搜索按钮可直接跳转到展示搜索结果的#cat_1 Div；但移动端搜索后首次点击按钮，仅会收起虚拟键盘，需二次点击才能完成跳转。尝试过blur()函数无效，跨页跳转正常，但需要实现同页内定位跳转。

相关代码：

HTML #

<form class="navbar-form navbar-left" action="index.php/#cat_1">
  <div class="d-inline-flex ">
        <input type="text" class="form-control" placeholder="Search" id="search">
        <button style="padding:0px; margin-left:5px;" type="button" class="btn btn-info" id="search_btn">
            <i class="fa fa-search" style="color: white; font-size:20px;"></i>
        </button>
    </div>
</form>

原JavaScript #

$( "#search_btn" ).click(function() {$( "#search_btn" ).click();location.href='#cat_1'});

问题原因 #

1. 事件绑定逻辑错误：原代码中点击事件内部再次触发按钮的click()，会导致事件循环触发，干扰正常跳转逻辑。
2. 移动端布局时序问题：移动端虚拟键盘收起时，浏览器会重新计算页面布局，此时立即执行跳转，浏览器可能还未完成布局更新，导致跳转指令被忽略。

解决方案 #

步骤1：修复事件绑定的冗余逻辑 #

移除原代码中重复触发点击的代码，避免循环执行。

步骤2：处理键盘收起后的布局稳定时机 #

通过blur()让输入框失焦触发键盘收起，再延迟一小段时间执行跳转，确保浏览器完成布局调整后再定位到目标Div；也可以使用更可靠的scrollIntoView()方法实现页面定位。

修改后的代码示例 #

方案一：延迟跳转+精准定位

$("#search_btn").click(function() {
    // 强制输入框失焦，触发虚拟键盘收起
    $("#search").blur();
    // 延迟300ms执行跳转，等待页面布局稳定
    setTimeout(() => {
        // 使用scrollIntoView实现更可靠的同页定位，支持平滑滚动
        document.getElementById('cat_1').scrollIntoView({
            behavior: 'smooth', // 可选，开启平滑滚动
            block: 'start'      // 目标元素顶部对齐视口
        });
        // 若不需要平滑滚动，也可以用 location.href = '#cat_1';
    }, 300);
});

方案二：监听输入框失焦事件（精准触发）

如果需要更精准的时机，可以监听输入框的blur事件，仅在点击搜索按钮导致的失焦时执行跳转：

let isSearchClicked = false;

$("#search_btn").click(function() {
    isSearchClicked = true;
    $("#search").blur();
});

$("#search").blur(function() {
    if (isSearchClicked) {
        setTimeout(() => {
            document.getElementById('cat_1').scrollIntoView({ block: 'start' });
            isSearchClicked = false;
        }, 200);
    }
});

额外说明 #

• 原form的action属性在当前场景下无效，因为按钮是type="button"，不会触发表单提交，可以根据需要删除或保留。
• 延迟时间可根据实际测试调整（200-300ms基本适配大部分移动端浏览器）。

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