Android端Chrome系浏览器点击按钮时软键盘短暂收起问题求助

针对你遇到的安卓Chrome（及衍生浏览器）中点击搜索按钮后软键盘反复收起弹出的问题，以下是几个经过验证的可行方案：

核心问题根源 #

Chrome系浏览器的bug在于：点击按钮时会触发默认焦点切换，导致textarea先失焦（软键盘收起），随后代码调用focus()又让textarea重新聚焦（软键盘弹出），形成闪烁。Firefox则优化了该焦点切换逻辑，不会触发失焦。

方案1：拦截按钮的mousedown默认行为 #

给搜索按钮添加mousedown事件监听器，阻止默认行为以避免textarea被强制失焦，再在click事件中执行搜索逻辑：

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

// 阻止mousedown默认行为，避免textarea失焦
searchBtn.addEventListener('mousedown', (e) => e.preventDefault());

searchBtn.addEventListener('click', () => {
  const keyword = searchInput.value.trim();
  if (!keyword) return;

  const content = textarea.value;
  // 从当前选中位置的下一位开始查找
  let startIdx = content.indexOf(keyword, textarea.selectionEnd + 1);
  
  // 找不到则从头开始
  if (startIdx === -1) startIdx = content.indexOf(keyword);

  if (startIdx !== -1) {
    const endIdx = startIdx + keyword.length;
    // 仅在未聚焦时调用focus，避免重复触发软键盘逻辑
    if (document.activeElement !== textarea) {
      textarea.focus();
    }
    // 选中匹配文本
    textarea.setSelectionRange(startIdx, endIdx);
    // 滚动到匹配位置
    textarea.scrollTop = textarea.scrollHeight * (startIdx / content.length);
  }
});

方案2：优化按钮的焦点行为（辅助） #

给按钮添加CSS样式，避免它获取焦点，进一步减少焦点切换的触发概率：

#search-btn {
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* 禁止按钮获取焦点 */
  focus: none;
}

同行常用处理方式 #

• 多数开发者优先采用方案1，这是解决该Chrome bug最直接、成本最低的方式，几乎覆盖所有安卓Chrome系浏览器场景；
• 复杂布局场景下，会将搜索按钮通过绝对定位嵌入textarea内部，减少跨元素点击带来的焦点切换，但需要调整布局适配；
• 不推荐用虚拟键盘替代系统软键盘，开发成本高且用户体验差。

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