Nativescript Vue：Android 上的 SearchBar 聚焦，页面加载时键盘可见答案

【问题标题】：Nativescript Vue: SearchBar on Android in focus with keyboard visible when page loadsNativescript Vue：Android 上的 SearchBar 聚焦，页面加载时键盘可见
【发布时间】：2020-12-19 01:02:31
【问题描述】：

在 Android 中，页面加载时键盘展开，焦点位于搜索栏上。

我试图让焦点不在页面加载时出现。相关代码为：

    <StackLayout height="100%" 
                         class="main-container" 
                         >
        <SearchBar ref="searchBars" 
                  class="search-bar" 
                  @loaded="onSearchLoaded($event)" 
                  @textChange="onTextChanged($event)"/>

我已尝试添加：

       mounted() {
          this.$refs.searchBars.nativeView.dismissSoftInput();
       }

但这没有奏效。我还尝试添加this.$refs.searchBars.nativeView.dismissSoftInput() 到searchBar的@loaded事件函数。

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案1】：

试试这个

<SearchBar @loaded="onSearchBarLoaded($event)"  />

并添加一个方法：

onSearchBarLoaded: function(event) {
    if (event.object.android) {
        setTimeout(() => {
            event.object.dismissSoftInput();
            event.object.android.clearFocus();
        }, 0);
    }
}

【讨论】：

【解决方案2】：

上面的方法我也试过了，失败了。所以我做了一个小技巧来解决这个问题。我添加了一个虚拟搜索栏并将可见性设置为隐藏。所以焦点将转移到虚拟搜索栏！这是我的代码。

<SearchBar 
v-model="searchPhrase"
@textChange="onSearch" 
@submit="onSearch"
backgroundColor="white" 
@clear="clearSearch"  />

<!--Dummy searchbar -->
<SearchBar v-show="false" />

【讨论】：

【解决方案3】：

你可以使用一种方法来专注于你想要的。

searchBars() {
      this.$refs.searchBars.nativeView.focus();
    },

【讨论】：