Es posible establecer el enfoque usando el método setFocus de nativeEloment.
Pero, ¿qué hay de quitar el foco?
¿Cómo podría eliminar el cursor y anular la selección de una entrada de una plantilla en una aplicación Angular 2+/Ionic 3?
Necesito eliminar el foco porque el teclado del móvil se mantiene abierto mientras una entrada tiene el foco.
Editar: la entrada es una entrada de iones de Ionic2 +.
1) Agregue una referencia de variable de plantilla a su entrada en la plantilla de su componente:
<ion-input #textInput> 2) Agregue ElementRef y ViewChild a las importaciones de su componente:
import { ElementRef, ViewChild } from '@angular/core' 3) Agregue la variable @ViewChild y los métodos relevantes a su componente:
export class AppComponent { @ViewChild('textInput') textInput; setFocus() { this.textInput.nativeElement.focus(); } removeFocus() { this.textInput.nativeElement.blur(); } } Puede activar setFocus() o removeFocus() de varias maneras. Aquí hay un ejemplo:
# 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(); } } }Para usuarios de Ionic 4 ;)
Después de probar varias soluciones para descartar/ocultar el teclado de una entrada de búsqueda, encontré una forma inspirada en su solución @zach-newburgh.
No estaba funcionando :
this.keyboard.hide()#searchInput (keyup.enter)="searchInput.blur()"this.searchInput.nativeElement.blur();this.searchInput.getElementRef().nativeElement.blur();Única solución de trabajo
this.searchInput._native.nativeElement.blur();t
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
<ion-input #searchInput type="search" (keyup.enter)="searchInput._native.nativeElement.blur()" [(ngModel)]="searchQuery"></ion-input>Espero que ayude
Aplique el enfoque y elimine el enfoque basado en la condición:
if (condition) { this.addressLine1.nativeElement.focus(); }else{ this.addressLine1.nativeElement.blur(); }