时间戳

首页 > 解决方案 > Ionic 3 - 手动触发模糊事件

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

问题描述

我想知道是否有手动触发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 不是函数。（在 'this.searchInput.setBlur()' 中，'this.searchInput.setBlur' 未定义）

标签： javascripttypescriptionic-frameworkionic3

解决方案

以编程方式模糊元素的最直接方法是首先通过@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();
  }
}

推荐阅读