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

Posted 2023-04-13

【中文标题】Nativescript Vue：Android 上的 SearchBar 聚焦，页面加载时键盘可见

【英文标题】：Nativescript Vue: SearchBar on Android in focus with keyboard visible when page loads

【发布时间】：2020-12-19 01:02:31

【问题描述】：

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

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

    <StackLayout  
                         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事件函数。

【参考方案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();
    ,