javascript - Ionic 3 - 手动触发模糊事件

Question

我想知道是否可以手动触发 ion-input 元素上的模糊事件？

最好是使用 ionic-native 方法，但任何基于 javascript 的技巧都可以。

我的配置:

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.1.1
   @ionic/app-scripts : 1.3.7

System:

   NodeJS : v6.10.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/bin/node)
   npm    : 3.10.10
   OS     : macOS High Sierra

我的 html 文件:

<div>    
   <ion-input (click)="openModal(fieldName)" [placeholder]="placeholder" #searchInput>
   </ion-input>
</div>

我的组件文件:

export class MyClass implements OnInit {

   @ViewChild('searchInput') searchInput: any;

   foo(): void {
      this.searchInput.blur();
   }
}

this.searchInput.blur() 触发以下错误:

TypeError: this.searchInput.setBlur is not a function. (In 'this.searchInput.setBlur()', 'this.searchInput.setBlur' is undefined)

Answer 1

以编程方式模糊元素的最直接方法是首先通过 @ViewChild 获取元素然后调用.setBlur()在那个元素上。像这样的东西:

export class HomePage {
  @ViewChild('myInput') myInput;

  onBlurClicked() {
    this.myInput.setBlur();
  }
}

然后在您的模板中，执行类似 <ion-input #myInput></ion-input> 的操作为您的输入，并制作一个带有点击事件回调的按钮 onBlurClicked .我在这里放了一个有效的 stackblitz 示例:https://stackblitz.com/edit/ionic-blank-3-9-2-owhgpf

编辑:因为这似乎不适用于您的 ionic 版本，您可以尝试直接模糊 native 元素，例如:

export class HomePage {
  @ViewChild('myInput', { read: ElementRef }) myInput: ElementRef;

  onBlurClicked() {
    // Call the vanilla js .blur() method on the native element.
    this.myInput.nativeElement.blur();
  }
}