点击特定按钮时阻止手机键盘关闭的技术方案咨询

我之前做移动端项目时也碰到过一模一样的问题——输入框聚焦弹出键盘后，点击提示类按钮，浏览器总会自动收起键盘，用stopPropagation()在捕获阶段阻止传播根本没用。后来才搞明白：浏览器的键盘收起行为并不是通过事件传播触发的，而是直接响应了输入框的失焦状态，所以阻止事件传播完全抓错了方向。

下面是我亲测有效的几种解决方案，按推荐程度排序：

方案一：点击按钮时主动让输入框重新聚焦 #

这是最直接有效的方法，核心思路是：在按钮点击的瞬间，立刻让输入框重新获得焦点，抵消浏览器触发的失焦行为。

// 先获取你的输入框和按钮元素
const targetInput = document.getElementById('your-input-element-id');
const hintBtn = document.getElementById('dontclosekeyboard_element_Id');

hintBtn.addEventListener('click', function(e) {
  // 阻止按钮可能附带的默认行为（比如某些浏览器的点击默认动作）
  e.preventDefault();
  // 手动让输入框重新聚焦，强制保持键盘弹出
  targetInput.focus();
  // 这里执行你的提示框显示逻辑
  showYourHintModal();
});

这个方法在绝大多数手机浏览器（Chrome、Safari、微信内置浏览器）里都能正常工作，唯一需要注意的是：如果你的提示框是弹窗类组件，要确保弹窗的元素不会抢走输入框的焦点（比如给弹窗容器添加tabindex="-1"避免自动聚焦）。

方案二：让按钮无法获取焦点 #

通过给按钮设置tabindex="-1"，让浏览器在点击按钮时不会将焦点从输入框转移到按钮上，从根源上避免输入框失焦。

首先修改HTML：

<button id="dontclosekeyboard_element_Id" tabindex="-1">显示提示</button>

然后配合简单的JS逻辑：

const hintBtn = document.getElementById('dontclosekeyboard_element_Id');

hintBtn.addEventListener('click', function(e) {
  e.preventDefault();
  // 执行提示框显示逻辑
  showYourHintModal();
});

tabindex="-1"的作用是：元素可以通过JS手动聚焦，但不会被键盘导航选中，也不会在点击时自动获取焦点。这样点击按钮时，输入框的焦点状态完全不受影响，键盘自然不会收起。

方案三：特殊场景下的兜底方案 #

如果上面两种方法都不生效（比如某些小众浏览器的奇葩行为），可以试试给输入框添加一个“虚拟焦点”的小技巧：

hintBtn.addEventListener('mousedown', function(e) {
  // 在mousedown阶段就阻止默认行为，提前拦截焦点转移
  e.preventDefault();
});

hintBtn.addEventListener('click', function() {
  // 执行提示框逻辑
  showYourHintModal();
});

mousedown事件比click触发更早，在这个阶段阻止默认行为，可以更早地拦截浏览器的焦点转移动作，不过这个方法可能会影响按钮的一些交互体验（比如长按菜单），所以只作为兜底使用。

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