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：文本字段上的点击侦听器将覆盖父侦听器，因此单击文本字段仍然会对焦并显示键盘

Answer 2

我发现这更优雅：

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

Answer 3

这对我有用：

event.object.dismissSoftInput()

如果使用Vue，您最终会得到：

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

可以找到文档here。

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

3 个答案: