在输入字段模糊时隐藏 Nativescript 中的 Android 键盘

Question

我有一个注册表单，其中包含多个 TextFields 和其他输入。当用户点击其中一个字段时，Android 软键盘将始终按预期显示。如果我在字段外点击，但键盘不会隐藏。有没有办法捕获此事件，以便在用户点击任何输入之外时隐藏键盘？

看来执行以下操作可以隐藏键盘

var pageContainer = page.getViewById('registration-container');
if(pageContainer.android) {
    pageContainer.android.clearFocus();
}

但我不确定如何捕获每一个模糊表单输入的点击事件。我什至不确定 Android 是否可行。

Answer 1

您可以将点击侦听器放在父视图中，这样当您单击它时（文本字段外的任何地方），它会清除显示键盘的文本字段的焦点。你这样做的方式是清除容器的焦点，而它应该恰好是文本字段：

在XML中：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout tap="clearTextfieldFocus">
        <Label text="Tap the button" class="title"/>
        <Label text="{{ message }}" class="message" textWrap="true"/>
        <TextField id="myTextfield" hint="Type here..."/>
    </StackLayout>
</Page>

在page.js中：

function clearTextfieldFocus(args) {
    var layout = args.object;
    var myTextfield = layout.getViewById("myTextfield");
    myTextfield.android.clearFocus();
}
exports.clearTextfieldFocus = clearTextfieldFocus;

P/s: textfield 上的点击侦听器将覆盖父侦听器，因此单击 textfield 仍会获得焦点并显示键盘

Answer 2

这对我有用：

event.object.dismissSoftInput()

如果是 Vue，你最终会得到：

<TextView v-model="textData"
          @blur="$event.object.dismissSoftInput()"
          editable="true"/>

可以找到文档 here。

Answer 3

我发现这个更优雅：

import * as utils from "tns-core-modules/utils/utils";
import { isIOS, isAndroid } from "tns-core-modules/platform";
import { frame } from "tns-core-modules/ui/frame";


export function hideKeyboard() {
    if (isIOS) {
        frame.topmost().nativeView.endEditing(true); 
    } 
    if (isAndroid) {
        utils.ad.dismissSoftInput(); 
    } 
}

在输入字段模糊时隐藏 Nativescript 中的 Android 键盘

Hide Android keyboard in Nativescript on input field blur

javascript

android

nativescript