Question

我想知道是否仍然可以手动触发Update Diagram!元素上的模糊事件？

最好是使用离子本征方法，但是任何基于JavaScript的技巧都可以。

我的配置：

ion-input

我的html文件：

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

我的组件文件：

<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(); } }触发以下错误：

TypeError：this.searchInput.setBlur不是函数。（在 'this.searchInput.setBlur（）'，'this.searchInput.setBlur'未定义）

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版本，因此您可以尝试直接模糊本机元素，例如：

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

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

Ionic 3-手动触发模糊事件

1 个答案: