隐藏Android键盘在javascript输入字段模糊

Hide Android keyboard in Nativescript on input field blur

本文关键字：输入 字段 模糊 javascript Android 键盘 隐藏      更新时间：2023-09-26

我有一个注册表单，其中包含几个TextFields和其他输入。当用户点击其中一个字段时，Android软键盘将总是按预期显示。如果我在场外点击，虽然键盘不会隐藏。是否有一种方法可以捕获此事件，以便当用户在任何输入之外点击时，我可以隐藏键盘?

看起来下面的操作允许我隐藏键盘

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

但是我不确定如何捕获模糊表单输入的每个tap事件。我甚至不确定这在Android上是否可行。

你可以把监听器放在父视图上，这样当你点击它的时候(在textfield之外的任何地方)，它会清除显示键盘的textfield的焦点。你这样做的方式是清除容器的焦点，而它应该恰好是textfield:

在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>

In page.js:

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

p/s:文本字段上的监听器将覆盖父监听器，所以点击文本字段仍然聚焦并显示键盘

我觉得这样更优雅:

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(); 
    } 
}

我就是这么做的:

event.object.dismissSoftInput()

在Vue的情况下，你最终得到:

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

文档可以在这里找到

相关文章：