Ionic中如何实现ion-input获焦时永不弹出键盘？

我之前做一个扫码类Ionic项目时，刚好碰到过一模一样的需求——要让input保持焦点状态，但绝对不能弹出系统键盘。踩了几个坑后，总结出几个亲测有效的方案，分享给你：

方案1：readonly + 模拟焦点样式（最稳定无闪屏） #

这个思路是用readonly属性从根源阻止键盘弹出，同时通过自定义样式模拟input获焦的视觉状态，让用户感知到它处于激活状态。

实现步骤： #

1. 给ion-input添加readonly，同时绑定点击/触摸事件切换焦点状态：

<ion-input 
  readonly
  [class.custom-focused]="isInputFocused"
  (click)="toggleInputFocus()"
  (touchstart)="toggleInputFocus()"
  placeholder="点击激活但不弹出键盘"
></ion-input>

2. 在组件TS里维护焦点状态，需要的话还能手动设置DOM焦点：

isInputFocused = false;

toggleInputFocus() {
  this.isInputFocused = !this.isInputFocused;
  // 如果需要让input真正获得DOM焦点（比如用于监听扫码事件）
  if (this.isInputFocused) {
    const nativeInput = document.querySelector('ion-input')?.shadowRoot?.querySelector('input');
    nativeInput?.focus();
  }
}

3. 添加CSS模拟获焦效果，匹配你的APP主题：

.custom-focused {
  --border-color: var(--ion-color-primary);
  --box-shadow: 0 0 0 2px rgba(56, 128, 255, 0.2);
  /* 可根据需求调整背景色、文字颜色等 */
}

方案2：结合Keyboard插件延迟隐藏键盘 #

如果你已经在用Ionic Keyboard插件但没生效，大概率是调用时机不对——键盘弹出有短暂延迟，直接在focus事件里调用hide可能赶不上。加个小延迟就能解决：

实现步骤： #

1. 确保已安装并导入Keyboard插件：

import { Keyboard } from '@ionic-native/keyboard/ngx';

constructor(private keyboard: Keyboard) {}

2. 给ion-input绑定ionFocus事件：

<ion-input (ionFocus)="handleInputFocus()"></ion-input>

3. 延迟100ms左右隐藏键盘：

handleInputFocus() {
  // 延迟确保键盘触发后再强制隐藏
  setTimeout(() => {
    this.keyboard.hide();
  }, 100);
}

注意：部分Android设备可能会有轻微的键盘闪屏现象，如果对视觉体验要求极高，方案1更合适。

方案3：原生事件阻止键盘弹出（Web/PWA环境适用） #

如果你的项目主要运行在Web浏览器或PWA中，可以直接阻止focus事件的默认行为，同时手动让input保持焦点：

<ion-input 
  (focus)="onInputFocus($event)"
></ion-input>

onInputFocus(event: FocusEvent) {
  // 阻止默认键盘弹出行为
  event.preventDefault();
  // 手动让input保持焦点
  const target = event.target as HTMLInputElement;
  setTimeout(() => {
    target.focus();
  }, 0);
}

方案4：全局配置（不推荐，除非全APP需要） #

如果整个APP都要禁止键盘自动弹出，可以在Capacitor配置里设置：
在capacitor.config.json中添加：

{
  "plugins": {
    "Keyboard": {
      "resize": "none",
      "disableScroll": true
    }
  }
}

或者修改Android的AndroidManifest.xml活动配置：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="stateHidden">
</activity>

这个方法会影响所有input，仅适合全局需求的场景。

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