如何专注于离子输入

Question

你好，我是离子新手/angular。

这是 Ionic4 中的一个小项目，我想获得 IonInput 焦点状态。

我查看了一些文档和论坛，但没有找到对我有帮助的东西。

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

我正在寻找的是 Ionic 3 中的类似内容，您可以使用 TextInput 执行此操作：

let hasFocus = textInput.isFocus();

Answer 1

我不熟悉 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>

如何专注于离子输入

How to get focus on Ion Input

angular

ionic-framework

input

ionic4