如何用JavaScript禁用iOS输入框原生键盘并保留光标？

嘿，这个iOS原生键盘的问题我太熟了！之前踩过readonly和blur()的坑——一个直接把光标搞没了，另一个会让键盘闪一下才消失，折腾了好久才找到靠谱的解决办法，给你分享两个实用方案：

方案一：拦截焦点事件，直接阻止键盘唤起 #

这个方法是最直接有效的，能从根源上阻止键盘弹出，还能保留原生光标：

const targetInput = document.getElementById('your-input-id');

targetInput.addEventListener('focus', (e) => {
  // 阻止系统唤起键盘的默认行为
  e.preventDefault();
  // 手动定位光标到输入框末尾，确保光标正常显示
  if (targetInput.setSelectionRange) {
    const contentLength = targetInput.value.length;
    targetInput.setSelectionRange(contentLength, contentLength);
  }
});

原理很简单：当输入框获取焦点时，preventDefault()直接阻断了系统唤起键盘的逻辑，再用setSelectionRange手动设置光标位置，完美解决了之前两个方法的瑕疵，真机测试完全不会有键盘闪烁的情况，光标也能正常显示。

方案二：结合readonly+自定义光标（适合完全自定义输入场景） #

如果你的输入逻辑完全不需要原生键盘（比如用自定义虚拟键盘、扫码填充内容），可以用readonly锁定输入框，再通过CSS模拟光标：

/* 给输入框加相对定位，方便放置模拟光标 */
.custom-input {
  position: relative;
  padding-right: 20px; /* 给光标留出位置 */
}

/* 用伪元素模拟闪烁光标 */
.custom-input::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.2em;
  background-color: #333;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  animation: cursorBlink 1s step-end infinite;
}

/* 光标闪烁动画 */
@keyframes cursorBlink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

之后你可以通过JS手动更新输入框内容，比如绑定自定义按钮的点击事件：

const customInput = document.getElementById('custom-input');
document.getElementById('add-text-btn').addEventListener('click', () => {
  customInput.value += '自定义输入内容';
});

这个方案适合完全定制化的输入场景，自定义光标样式也能和你的UI风格统一。

小提醒 #

• 一定要在真实iOS设备上测试，模拟器的键盘行为有时候和真机不一样
• 方案一完全支持复制粘贴等原生操作，方案二如果需要支持复制，得额外监听copy事件处理

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