用于 Nativescript-Vue 的搜索栏的 DismissSoftInput()

Posted

技术标签:

【中文标题】用于 Nativescript-Vue 的搜索栏的 DismissSoftInput()【英文标题】:DismissSoftInput() for search-bar for Nativescript-Vue 【发布时间】:2019-11-12 07:20:06 【问题描述】:

解释问题:

搜索栏无法关闭打开的键盘。这使得 搜索栏非常不可用,因为普通用户模式是 用户搜索某物,然后按该项目并进行导航 那里。在 android 上(至少 >= 5.x),打开的键盘将 继续保持打开状态,即使在新页面上也是如此。

参考Github 上的问题,任何人如何为 Nativescript-Vue 而不是使用 Typescript 的 Nativescript 做到这一点

更新:

添加游乐场:https://play.nativescript.org/?template=play-vue&id=hrrcW9

如果我最小化应用程序,然后再次单击它,键盘会再次弹出。

【问题讨论】:

【参考方案1】:

正如您在链接问题中已经看到的那样,功能请求已完成关闭。 dismissSoftInput() 是 SearchBar 现在隐藏键盘的方法。

如果您仍有问题,请分享您的代码。

更新:

将第一个可聚焦元素集中在片段/活动上是 Android 的默认行为。添加事件侦听器/超时以从每个屏幕移除焦点可能很烦人,我更喜欢使用自动焦点视图作为我的布局的第一个元素(这不会对屏幕设计产生任何影响),这将阻止自动聚焦在我的文本上字段/搜索栏。

import  View  from "tns-core-modules/ui/core/view";

export class AutoFocusView extends View 

    createNativeView() 
        if (typeof android !== "undefined") 
            const linearLayout = new android.widget.LinearLayout(this._context);
            linearLayout.setFocusableInTouchMode(true);
            linearLayout.setFocusable(true);
            return linearLayout;
        
        return super.createNativeView();
    

    onLoaded() 
        super.onLoaded();
        if (typeof android !== 'undefined') 
            this.requestFocus();
        
    

    requestFocus() 
        if (typeof android !== "undefined") 
            const nativeViewProtected = this.nativeViewProtected;
            nativeViewProtected.requestFocus();
        
    

Playground Sample

【讨论】:

我没有看到 Playground 示例有任何问题,键盘保持隐藏状态。 如果您按下中间(或主页)按钮,会“最小化”应用程序。重新打开最小化的应用程序后,键盘将再次弹出。 Android 的默认行为是将第一个可聚焦元素集中在片段/活动上。当您从后台恢复时,超时间隔还不够,当然使用超时和其他东西可能会很烦人。我通常更喜欢在我的布局中包含一个虚拟的自动对焦视图作为第一个元素,这样我的文本字段/搜索栏就不会不必要地成为焦点。我会尽快更新您的 Playground。 @Manoj 但如果我使用它,我会在 ios 上遇到错误,因为 IOS 中没有 linearLayout。您能否更新您的答案,以便人们可以使用它而不会在 ios 上出现错误? 答案已经在考虑 iOS,if (typeof android !== "undefined") 。可能您也需要在 requestFocus() 方法中进行相同的检查。

以上是关于用于 Nativescript-Vue 的搜索栏的 DismissSoftInput()的主要内容,如果未能解决你的问题,请参考以下文章

用于 vue-cli-template 的 nativescript-vue 音频模块

从带有搜索栏的表格单元格创建模式视图时,无法在导航栏中创建后退按钮

Nativescript-Vue 中的 MQTT

全局组件使用以避免代码重复(Nativescript-Vue)

NativeScript-Vue 中的音频播放器

需要一个用于垂直菜单栏的 jquery 插件