Android端keydown事件event.preventDefault()不触发及输入框类型切换问题

我之前也踩过类似的坑！Android端的浏览器/WebView对动态修改input的type属性确实有兼容性问题，尤其是在元素已经聚焦的情况下直接修改，系统大概率不会重新识别键盘类型。给你几个靠谱的解决方案：

方案1：用inputmode替代动态切换（首推） #

这是HTML5专门为移动端键盘适配提供的属性，完全不需要切换type，直接给type="text"的输入框加上inputmode="numeric"，既能弹出数字键盘，又能保留text类型的灵活性，完美避开number类型的各种限制（比如无法输入多个小数点、自动过滤非数字字符、光标定位异常等）。

示例代码：

<input 
  type="text" 
  inputmode="numeric" 
  pattern="[0-9.]*"  <!-- 可选，配合限制输入格式 -->
  placeholder="请输入数字"
>

• inputmode="numeric"：明确告诉移动端浏览器弹出数字键盘（不同系统的键盘样式略有差异，但核心都是数字输入）
• pattern属性：可以自定义允许的输入规则，比如只允许数字和小数点，还能配合HTML5原生验证功能

方案2：调整动态切换的时机（兼容旧系统） #

如果你的项目需要兼容不支持inputmode的旧Android版本，可以试试修改切换type的时机——不要在focus事件触发时直接修改，而是延迟一小段时间，并且切换后重新聚焦：

示例代码：

const numInput = document.getElementById('custom-num-input');

numInput.addEventListener('focus', () => {
  // 延迟50ms切换类型，避开Android聚焦时的状态锁定
  setTimeout(() => {
    numInput.type = 'number';
    // 重新触发聚焦，确保数字键盘正常弹出
    numInput.focus();
  }, 50);
});

numInput.addEventListener('blur', () => {
  numInput.type = 'text';
  // 这里执行你的自定义验证逻辑
  const inputValue = numInput.value;
  if (!/^\d+(\.\d+)?$/.test(inputValue)) {
    // 处理验证失败的情况，比如添加错误样式
    numInput.classList.add('input-error');
  } else {
    numInput.classList.remove('input-error');
  }
});

这个方案的核心是避开Android在聚焦瞬间的属性锁定，延迟修改后再重新聚焦，让浏览器主动刷新键盘配置。

为什么Android会失效？ #

简单来说，Android的WebView内核（比如Chrome、三星浏览器等）在input元素处于聚焦状态时，对type属性的变更处理逻辑和iOS不同：iOS会立即重新渲染输入框并切换键盘，但Android会认为聚焦状态下的输入框类型是固定的，不会主动触发键盘刷新。

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