JavaScript如何阻止点击自定义按钮时移动端软键盘自动隐藏

现有HTML页面包含编辑区域、位于软键盘上方的自定义功能按钮，界面布局如下：

------------
|1| Hello  |
|2| World  |
| |        |
| |        |
------------
|Tab|( ) [ |
------------
|qwertyuiop|
| asdfghkl |
| zxcvbnm  |
| [     ]  |
------------

点击编辑器区域可正常唤起移动端软键盘，但软键盘显示时，点击上方的Tab等自定义按钮会触发软键盘自动收起，需要实现点击自定义按钮时阻止软键盘隐藏的效果，预期逻辑类似：

keyboard.preventDefault();

软键盘自动收起的核心原因是点击非输入区域时，编辑元素失焦，系统默认触发软键盘回收，针对这个原因有两种可落地的方案：

• 阻止按钮点击的默认行为，从根源避免编辑区失焦
  点击事件的触发顺序为touchstart→touchend→mousedown→mouseup→click，在事件链路早期阻止默认行为，就不会触发编辑区失焦：

  const toolBarBtns = document.querySelectorAll('.custom-toolbar button')
  toolBarBtns.forEach(btn => {
    // 移动端触摸事件阻止默认，必须设置passive: false否则拦截不生效
    btn.addEventListener('touchstart', e => e.preventDefault(), { passive: false })
    // 兼容桌面端内嵌webview场景
    btn.addEventListener('mousedown', e => e.preventDefault())
    // 按钮自身的业务逻辑正常写在click事件中即可
    btn.addEventListener('click', () => {
      // 例：Tab按钮插入制表符、插入特殊符号等编辑逻辑
      document.execCommand('insertText', false, '\t')
    })
  })
  

• 操作完成后主动将焦点切回编辑区（兼容性最强方案）
  部分深度定制的安卓webview中，上述拦截方案可能失效，可在按钮逻辑执行完成后，主动调用编辑区的focus方法拉回焦点，软键盘就不会收起：

  btn.addEventListener('click', () => {
    // 提前保存编辑区的光标位置，避免focus后光标跳转到末尾
    const selection = window.getSelection()
    const lastRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null
    
    // 执行按钮对应的编辑操作
    // ... 自定义逻辑
    
    // 主动给编辑区聚焦
    const editor = document.querySelector('#editor')
    editor.focus()
    
    // 恢复之前保存的光标位置
    if (lastRange) {
      selection.removeAllRanges()
      selection.addRange(lastRange)
    }
  })
  

• 自定义按钮不要设置可聚焦属性，仅保留tabindex="-1"即可，避免按钮自身抢占编辑区焦点
• 如果编辑区是contenteditable元素，优先使用第一种方案，光标位置不会出现偏移；如果是textarea/input原生输入框，两种方案搭配使用稳定性最高

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