Ionic ion-textarea setFocus 加载视图时不起作用答案

【问题标题】：Ionic ion-textarea setFocus when view loaded not workingIonic ion-textarea setFocus 加载视图时不起作用
【发布时间】：2017-10-26 11:32:02
【问题描述】：

我有一个 ionic3 ion-textarea：

<ion-content padding class="note-detail">
  <ion-item>
    <ion-textarea #myInput [(ngModel)]="note.content"
                   (ngModelChange)="textValueChanged()" placeholder="" rows="6"></ion-textarea>
  </ion-item>
</ion-content>

我想在加载此视图时自动聚焦此文本区域。

如果我直接设置焦点，它会立即失去焦点（键盘显示和隐藏）：

  ionViewDidLoad() {
      this.myInput.setFocus();
  }

如果我设置了超时，什么都不会发生，textarea 根本不关注：

  ionViewDidLoad() {
    setTimeout(()=>{
      console.log("set timeout fired!");
      this.myInput.setFocus();
    },1000);
  }

为什么？

【问题讨论】：

标签： ionic3

【解决方案1】：

如果强行打开键盘怎么办？

import { Keyboard } from 'ionic-native';

ionViewDidLoad() {

 setTimeout(() => {
   Keyboard.show(); 
   this.myInput.setFocus();
 }, 1000);

}

参考：Ionic Docs

【讨论】：

【解决方案2】：

您可以使用自动对焦属性：

<ion-textarea autofocus ... ></ion-textarea>

问候

【讨论】：

它只工作一次。第二次加载不工作。

【解决方案3】：

我遇到了同样的问题，我刚刚解决了它。由于ionic-plugin-keyboard 已弃用，native-keyboard 不起作用（至少它对我不起作用）。

native-keyboard API 文件：https://ionicframework.com/docs/native/keyboard/

已弃用：https://github.com/ionic-team/ionic-plugin-keyboard

我也在ionic-angular 中尝试过Keyboard，但它也对我不起作用。

================================================ ================

无论如何，这是我修复它的方法：

安装新的cordova-plugin-ionic-keyboard:https://github.com/ionic-team/cordova-plugin-ionic-keyboard

在组件中：

...
declare var Keyboard: any;
...
export class MapSearchbarModal {
    @ViewChild("searchbar") searchbar: Searchbar;
...
    ionViewDidLoad() {
      setTimeout(() => {
        this.searchbar.setFocus();
        Keyboard.show();
      }, 100);
    }
...
}

在 HTML 中：

<ion-searchbar #searchbar
...
</ion-searchbar>

【讨论】：