Nativescript/Angular textField 模糊事件不工作

Question

大家下午好，

我正在使用 nativescript (angular/typescript) 制作一个聊天应用程序，我需要检测用户何时在 android 设备上按下“键盘按下”按钮。但是，当用户按下此按钮时，不会调用附加到我的 textField 的模糊事件。谁能帮我？以下是我的代码示例。（请注意，键盘向下按钮与返回按钮不同！！）

chat.component.html:

<TextField #textInput backgroundColor="lightgray" width="100%" hint="Typ een bericht" secure="false" returnKeyType="done"
        (returnPress)="sendMsg($event)" autocorrect="false" maxLength="254" (focus)="raiseInput()" (tap)="raiseInput()"
        (blur)="lowerInput()">
    </TextField>

chat.component.ts:

    raiseInput() {
    console.log('focus');
    this.chatListHeight = "50"
}
lowerInput() {
    console.log('blur');
    this.chatListHeight = "92"
}

当我点击 textField 时，控制台会记录 'focus'，但是当我点击键盘向下按钮时，它不会记录 'blur'

提前致谢，贾里

Answer 1

如果目标是在键盘为showing/hiding时修改视图的高度，您可以使用ViewTreeObserver.OnGlobalLayoutListener。

listenToKeyboardChanges(): void {
    const that = this;
    // if this is triggered to early, it would error out because of frame not being defined
    if (!Frame.topmost()) {
      setTimeout(() => this._listenToKeyboardChangesAndroid(), 100);
      return;
    }
    if (!Frame.topmost().currentPage) {
      setTimeout(() => this._listenToKeyboardChangesAndroid(), 100);
      return;
    }
    const currentView = Frame.topmost().currentPage.android;

    this.androidObserver = new android.view.ViewTreeObserver.OnGlobalLayoutListener(
      {
        onGlobalLayout(): void {
          const newKeyboardIsOpened = Utils.android
            .getInputMethodManager()
            .isAcceptingText();

          const rect = new android.graphics.Rect();
          currentView.getWindowVisibleDisplayFrame(rect);
          const rootView = Application.getRootView();
          if (rootView) {
            that._screenHeight = Application.getRootView().getMeasuredHeight();
          }
          const missingSize = that._screenHeight - (rect.bottom - rect.top);
          const isOpen = missingSize < -that._screenHeight * 0.15;

          // this runs outside of angular zone, we will need to
          // run inside so change detection can be called when a UI
          // update depends on this observable
          that.zone.run(() => {
              
             // isOpen will tell you if the keyboard is open or not

          });
        },
      }
    );
    currentView
      .getViewTreeObserver()
      .addOnGlobalLayoutListener(this.androidObserver);
}

一个可能也适用于您的情况的更简单的替代方法是将以下内容添加到您的 AndroidManifest.xml。这应该让 Android 根据键盘是否显示自动调整视图大小。

<activity
  ...
  android:windowSoftInputMode="adjustResize">

Nativescript/Angular textField 模糊事件不工作

Nativescript/Angular textField blur event not working

typescript

nativescript

angular