Warm tip: This article is reproduced from serverfault.com, please click

angular-如何专注于离子输入

(angular - How to get focus on Ion Input)

发布于 2021-06-17 14:55:33

你好,我是离子/ Angular 的新手。

这是 Ionic4 中的一个小项目,我想获得IonInput Focus 状态。

我一直在查看文档和论坛,但没有找到对我有帮助的东西。

我知道有一个IonFocus事件会在输入具有焦点时触发,但它不会告诉我输入是否在给定时刻聚焦。

当你可以使用 TextInput 执行此操作时,我正在寻找类似于 Ionic 3 中的内容:

let hasFocus = textInput.isFocus();

Questioner
Antoine Muresan
Viewed
0
ierhalim 2021-06-18 02:06:15

我对 ionic 不熟悉,但你始终可以使用 Angular 指令来注册事件并存储当前状态。

所以我检查了 ionic 文档并看到了 2 个我可以使用的事件。

ionBlur当输入失去焦点时发出。

ionFocus 当输入有焦点时发出。

import { Directive, EventEmitter, Input, OnInit, Output, Self } from '@angular/core';
import { IonInput } from '@ionic/angular';

    @Directive({
        selector: '[appFocusState]',
    })
    export class FocusStateDirective implements OnInit {
    
        constructor(@Self() private readonly ionInput: IonInput) { }
    
        private _hasFocus: boolean;
    
        @Input('appFocusState')
        set hasFocus(value: boolean) {
            this._hasFocus = value;
            // Also you can support setted focus via appFocusState input.
            if (this._hasFocus) {
                this.ionInput.setFocus();
            } else{
                // If yo want to support focus out when hasFocus property setting to false, you should check the ionic docs and find a way to support focusOut.
            }
        }
    
        // Required to support two level binding.
        @Output('appFocusStateChange')
        hasFocusChange = new EventEmitter<boolean>();
    
        get hasFocus() {
            return this._hasFocus;
        }
        ngOnInit(): void {
            this.ionInput.ionBlur.subscribe(() => {
                if (this._hasFocus) { 
                    this._hasFocus = false;
                    this.hasFocusChange.next(this._hasFocus);
                }
            });
    
            this.ionInput.ionFocus.subscribe(()=>{
                if(!this._hasFocus){
                    this._hasFocus = true;
                    this.hasFocusChange.next(this._hasFocus);
                }
            });
        }
    }

当你将此指令添加到模块的声明中时,你可以检查焦点状态。

  <ion-label>Focus State {{fooInputFocusState}}</ion-label>
  <ion-input [(appFocusState)]="fooInputFocusState" ></ion-input>