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

【问题标题】：Hide Android keyboard in Nativescript on input field blur在输入字段模糊的Nativescript中隐藏Android键盘
【发布时间】：2016-10-09 22:18:07
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript android nativescript

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

【讨论】：

好吧，你的 PS 是我在考虑这个问题时并不确定的。我会试一试。谢谢
我是否需要在布局中为每个文本字段添加明确的焦点？
如果您的页面包含多个没有 id 的文本字段，因为它们是在 *ngFor 和 *ngIfs 中动态添加的，所以关于该做什么的任何想法... 我需要动态设置吗？每个添加的文本字段的 ID，然后在 clearTextfieldFocus 函数中循环遍历所有调用 clearfocus() 的文本字段？跟踪它们似乎很麻烦。
我有一段时间没有开发 NativeScript，但我记得，有一种方法可以让容器获取所有子视图。迭代这些子视图并明确关注每个子视图怎么样？ docs.nativescript.org/api-reference/classes/…
我也试过这个，但对我不起作用。还有其他解决方案吗？

【解决方案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(); 
    } 
}

【讨论】：

【解决方案3】：

这对我有用：

event.object.dismissSoftInput()

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

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

可以在here找到文档。

【讨论】：