解决因按钮点击失焦导致软键盘短暂收起的问题

我之前做类似文本搜索功能时，也踩过Android Chrome这个软键盘跳闪的坑，结合自己的实践和社区里其他开发者的解决方案，给你几个靠谱的方向：

1. 避免不必要的textarea.focus()调用 #

Chrome Android下，当textarea已经处于聚焦状态时，重复调用focus()会触发软键盘的重新初始化，导致短暂收起再弹出。你可以在代码里加个判断，只有当textarea不是当前活跃元素时才调用focus：

const textarea = document.getElementById('target-textarea');

function highlightMatch(start, end) {
  // 仅在未聚焦时执行focus
  if (document.activeElement !== textarea) {
    textarea.focus();
  }
  // 选中匹配内容
  textarea.setSelectionRange(start, end);
}

2. 阻止搜索按钮抢占焦点 #

默认情况下，点击按钮会让按钮获得焦点，这会导致textarea临时失焦、软键盘收起，之后再聚焦textarea又会弹出键盘。解决这个问题有两种方式：

方式A：让按钮不可聚焦 #

给按钮添加tabindex="-1"属性，这样点击时按钮不会获得焦点：

<button id="search-btn" tabindex="-1">查找下一处</button>

方式B：在点击事件中阻止默认行为 #

在按钮的点击事件里调用event.preventDefault()，阻止按钮的默认聚焦行为：

document.getElementById('search-btn').addEventListener('click', (e) => {
  // 阻止按钮获得焦点
  e.preventDefault();
  // 执行你的搜索逻辑
  searchAndHighlightNext();
});

3. 使用非表单元素替代按钮 #

如果上面的方法还是有问题，可以直接用<div>或<span>来模拟搜索按钮，这类元素默认不会在点击时抢占焦点，textarea能一直保持聚焦状态，软键盘自然不会波动：

<div id="search-btn" style="padding: 8px 12px; background: #eee; cursor: pointer; border-radius: 4px;">查找下一处</div>

然后给这个div绑定点击事件，执行搜索逻辑即可。

社区开发者的通用做法 #

在社区讨论中，大部分遇到这个问题的开发者都会优先从避免焦点切换入手——要么让触发操作的元素不抢占焦点，要么确保textarea始终保持聚焦状态。另外，也有开发者会针对Chrome Android做环境检测，只在该环境下跳过重复的focus调用，避免影响其他浏览器的正常行为。

这些方案里，用非聚焦元素模拟按钮或者阻止按钮聚焦的方法，是最直接有效的，能从根源上解决焦点切换导致的软键盘跳闪问题。

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