移动端点击自定义下拉按钮时阻止虚拟键盘弹出的问题

你遇到的核心问题是inputmode='none'仅对<input>等输入类元素生效，按钮不支持该属性。移动端点击按钮时虚拟键盘弹出，通常是浏览器误将按钮识别为可输入交互元素（尤其是带有combobox角色）导致的，以下是几个可行的解决方法：

方法1：添加contenteditable="false"属性 #

直接给按钮添加该属性，明确告知浏览器此元素不可编辑，从根源阻止虚拟键盘唤起：

<button
  id="dropdown-button"
  class="select-button bg-gray-50 border border-gray-300 text-gray-900 text-xs rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
  role="combobox"
  aria-controls="select-dropdown"
  contenteditable="false"
>
  <span class="selected-value text-xs">Age</span>
  <span class="arrow"></span>
</button>

方法2：阻止触摸事件默认行为 #

针对移动端触摸交互，阻止touchstart事件的默认行为，避免浏览器触发键盘唤起逻辑：

// 在selectButton的事件绑定部分添加
selectButton.addEventListener("touchstart", (event) => {
  event.preventDefault();
}, { passive: false });

该方法仅作用于移动端触摸场景，不会影响桌面端的点击交互。

方法3：优化焦点流转逻辑 #

展开下拉时快速将焦点从按钮转移到下拉选项，避免按钮焦点停留触发键盘：
修改toggleDropdown函数，在展开下拉时先让按钮失去焦点：

const toggleDropdown = (expand = null) => {
  const isOpen = expand !== null ? expand : dropdown.classList.contains("hidden");
  dropdown.classList.toggle("hidden", !isOpen);
  selectButton.setAttribute("aria-expanded", isOpen);

  if (isOpen) {
    selectButton.blur(); // 先让按钮失去焦点
    focusedIndex = [...options].findIndex((option) =>
      option.classList.contains("selected")
    );
    focusedIndex = focusedIndex === -1 ? 0 : focusedIndex;
    updateFocus();
  } else {
    focusedIndex = -1;
    selectButton.focus();
  }
};

此方法既能解决键盘问题，又能保持组件的无障碍访问性，符合ARIA规范。

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