如何从 Angular 2+/Ionic2+ 中的离子输入中移除焦点

Question

可以使用 nativeEloment 的 setFocus 方法设置焦点。

但是移除焦点怎么样？

如何在 Angular 2+/Ionic 3 应用程序中从模板中删除光标并取消选择输入？

我需要移除焦点，因为移动键盘在输入具有焦点时保持打开状态。

编辑：输入是 Ionic2+ 的离子输入。

Answer 1

1) 在组件的模板中添加对输入的模板变量引用：

<ion-input #textInput>

2) 将 ElementRef 和 ViewChild 添加到组件的导入中：

import { ElementRef, ViewChild } from '@angular/core'

3) 将@ViewChild 变量和相关方法添加到您的组件中：

export class AppComponent {

  @ViewChild('textInput') textInput;

  setFocus() {
    this.textInput.nativeElement.focus();
  }

  removeFocus() {
    this.textInput.nativeElement.blur();
  }

}

您可以通过多种方式触发setFocus() 或removeFocus()。这是一个例子：

# app.component.html

<ion-input #textInput>

# app.component.ts

import { HostListener } from '@angular/core';

export class AppComponent {

  [previous code elided for readability]

  isInputActive: boolean;

  @HostListener('document:click', ['$event'])
  handleClickEvent(event: MouseEvent): void {
    if (document.activeElement !== this.textInput.nativeElement) {
      this.textInput.nativeElement.blur();
    }
  }
}

Answer 2

对于 Ionic 4 用户 ;)

在尝试了多种解决方案来关闭/隐藏搜索输入的键盘后，我找到了一种从您的解决方案 @zach-newburgh 中获得灵感的方法。

没有工作：

• this.keyboard.hide()
• #searchInput (keyup.enter)="searchInput.blur()"
• this.searchInput.nativeElement.blur();
• this.searchInput.getElementRef().nativeElement.blur();

唯一有效的解决方案

this.searchInput._native.nativeElement.blur();

---

完整的解决方案

TS方式

ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { TextInput } from 'ionic-angular';

...

@ViewChild('searchInput') searchInput: TextInput;

...

onSearchEnter() {
    this.searchInput._native.nativeElement.blur();
}

html

<ion-input #searchInput
           type="search"
           (keyup.enter)="onSearchEnter()"
           [(ngModel)]="searchQuery"></ion-input>

HTML 和最快的方式

html

<ion-input #searchInput
           type="search"
           (keyup.enter)="searchInput._native.nativeElement.blur()"
           [(ngModel)]="searchQuery"></ion-input>

希望它会有所帮助。

Answer 3

根据条件应用焦点和移除焦点：

if (condition) {
  this.addressLine1.nativeElement.focus();
}else{
  this.addressLine1.nativeElement.blur();
}

Answer 4

这在 ionic 5 上对我有用

this.searchInput.getInputElement().then((input) => {
  input.blur();
});

Answer 5

Declare veiwChild with one public variable
@ViewChild('myActionForm', { static: false, read: ElementRef }) public actionForm: ElementRef<any>;
**add set Timeout with in the method**
        setTimeout(() => {
          this.actionForm.nativeElement.click();
        }, 100);