如何在Ionic 3+Angular 5中实现textarea自动聚焦时隐藏键盘？

针对你遇到的自动聚焦textarea时弹出键盘的问题，我整理了几个适合Ionic 3和Angular 5场景的解决方案，你可以根据项目情况选择：

方案1：使用Ionic Keyboard插件手动隐藏键盘 #

如果你的项目已经集成了cordova-plugin-ionic-keyboard（Ionic 3项目通常默认会包含），可以通过先聚焦再立即关闭键盘的方式实现需求：

1. 首先在组件中导入并注入Keyboard服务：

import { Keyboard } from '@ionic-native/keyboard';
import { ViewChild } from '@angular/core';
import { Textarea } from 'ionic-angular';

@Component({
  // ...组件元数据
})
export class YourComponent {
  @ViewChild('input') myInput: Textarea;

  constructor(private keyboard: Keyboard) {}

  // 你的聚焦逻辑
  setInputFocus() {
    setTimeout(() => {
      this.myInput.setFocus();
      // 聚焦后立即关闭键盘
      this.keyboard.close();
    }, 1000);
  }
}

这个方法的原理很简单：先让textarea获得焦点，然后马上调用键盘插件的close()方法强制收起键盘，既保留了聚焦状态，又不会弹出键盘。

方案2：利用readonly属性绕过键盘触发 #

如果不想依赖键盘插件，可以通过临时设置textarea的readonly属性来阻止键盘弹出，聚焦后再移除该属性：

import { ViewChild } from '@angular/core';
import { Textarea } from 'ionic-angular';

@Component({
  // ...组件元数据
})
export class YourComponent {
  @ViewChild('input') myInput: Textarea;

  // 你的聚焦逻辑
  setInputFocus() {
    setTimeout(() => {
      const nativeTextarea = this.myInput._elementRef.nativeElement;
      // 临时设置readonly，防止聚焦时弹出键盘
      nativeTextarea.setAttribute('readonly', 'true');
      nativeTextarea.focus();
      // 延迟移除readonly，保证textarea仍可编辑
      setTimeout(() => {
        nativeTextarea.removeAttribute('readonly');
      }, 100);
    }, 1000);
  }
}

这个方案无需额外插件，利用原生DOM属性实现需求，适合不想引入多余依赖的场景。

注意事项 #

• 确保你已经通过@ViewChild('input')正确获取到了textarea组件实例，否则setFocus()方法会失效；
• 你的textarea设置了opacity: 0，看起来是用来接收扫描输入的隐藏组件，这两个方案都能完美适配这种场景，不会影响后续的ionChange事件触发。

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