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

我之前在做类似的文本检索功能时，也碰到过Chrome系浏览器这种软键盘闪一下的糟心问题，结合自己的调试和社区里其他开发者的实践，给你几个可以尝试的方案：

1. 优化焦点与选区的执行顺序 #

Chrome在重复调用focus()时，会触发软键盘的重新初始化，这是导致闪烁的核心原因之一。你可以先判断textarea是否已经处于焦点状态，只有在必要时才调用focus()，同时调整选区设置的时机：

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

searchBtn.addEventListener('click', () => {
  // 先执行你的匹配逻辑，找到下一处的起始和结束位置
  const [nextStart, nextEnd] = findNextMatch();
  
  // 仅在textarea未聚焦时才调用focus
  if (document.activeElement !== textarea) {
    textarea.focus();
  }
  // 直接设置选区，已聚焦状态下不会触发键盘波动
  textarea.setSelectionRange(nextStart, nextEnd);
  // 手动滚动到可视区域（部分场景下setSelectionRange会自动处理，保险起见补充此步骤）
  textarea.scrollTop = textarea.scrollHeight * (nextStart / textarea.value.length);
});

2. 改用mousedown/touchstart事件阻止焦点切换 #

移动端Chrome中，点击按钮时会默认让当前聚焦的textarea失去焦点（导致键盘收起），之后你的代码再重新focus回去，这就是闪烁的直接原因。你可以把搜索逻辑绑定到mousedown（或touchstart）事件，并阻止默认的焦点转移行为：

searchBtn.addEventListener('mousedown', (e) => {
  // 阻止按钮获取焦点，避免textarea失去焦点
  e.preventDefault();
  
  const textarea = document.getElementById('target-textarea');
  const [nextStart, nextEnd] = findNextMatch();
  
  // 确保textarea处于聚焦状态（如果之前没聚焦的话）
  if (document.activeElement !== textarea) {
    textarea.focus();
  }
  textarea.setSelectionRange(nextStart, nextEnd);
});

// 针对纯触摸设备，补充绑定touchstart事件
searchBtn.addEventListener('touchstart', (e) => {
  e.preventDefault();
  // 执行相同的搜索定位逻辑
});

这个方法是社区里反馈最有效的方案之一，从根源上避免了焦点的切换波动。

3. 让搜索按钮永远不获取焦点 #

通过设置按钮的属性和样式，让它在点击时不会抢走textarea的焦点，这样textarea就能一直保持聚焦状态，软键盘自然不会闪烁：

<button id="search-btn" tabindex="-1" focusable="false">下一处匹配</button>

同时配合CSS强化效果：

#search-btn {
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

tabindex="-1"会让按钮无法通过键盘导航获取焦点，focusable="false"是针对部分浏览器的额外设置，确保点击时不会触发焦点转移。

4. 替代方案：使用contenteditable元素（成本较高） #

如果上述方案都无法满足需求，你可以考虑用contenteditable="true"的div代替textarea。虽然需要额外处理文本输入、选区管理等逻辑，但它的焦点行为在Chrome移动端更稳定，不容易出现软键盘闪烁的问题。不过这个方案需要重构部分代码，适合对交互体验要求极高的场景。

社区里大部分开发者遇到这个问题时，优先尝试的是前三个方案，尤其是第二种通过mousedown + preventDefault的方式，解决率很高。你可以根据自己的代码结构调整测试。

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