ionic-framework - ionic : Focusing on input field on sub-header makes keyboard hide list-elements

Question

我正在做一个 Ionic 项目，在我们的一个 View 中，我们在子标题中有一个输入字段。使用此输入字段，用户可以搜索 ionic 列表中显示的其他用户。

我遇到的问题是，当键盘出现时，它实际上隐藏了 ionic 列表的一部分。从 Ionic 文档中阅读键盘文档后，我认为问题是由于子标题输入字段和 ionic 列表不属于同一可滚动区域的一部分。

有什么办法可以解决这个问题吗？

以下是代码的相关部分:

<ion-header-bar align-title="left" class="bar-light bar-subheader item-input-inset">
    <div class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="searchUsers" ng-change="showUsersSuggestions($event);" ng-focus="enableSearch(true)" ng-blur="enableSearch(false)">
        <button class="button button-clear clear-search icon ion-ios-close-empty" ng-click="clearSearch()"></button>
    </div>
</ion-header-bar>

<ion-content>
    <ion-list can-swipe="true" ng-if="showSearchResults">
        <ion-item class="item item-divider list-result" style="border-top:0;">
            Search results
        </ion-item>
        <ion-item class="item item-avatar item-icon-right item-text-wrap list-result" ng-show="searchUsers && searchUsers.length >= 3 && usersSuggestions" ng-repeat="f in usersSuggestions">
            <img ng-src="{{getAvatarUrl(f)}}" width="40" height="40" ng-click="showProfileInfo(f)">
            <h2 ng-show="f.displayName" ng-click="showProfileInfo(f)">{{f.displayName}}</h2>
            <p ng-click="showProfileInfo(f)">{{f.email}}</p>
        </ion-item>
    </ion-list>
    ......
</ion-content>

Answer 1

我发现解决这个问题的唯一方法是在内容触摸事件时关闭键盘..

<ion-content class="has-subheader" on-touch="hideKeyboard()">
    ...
</ion-content>

scope.hideKeyboard = function() {
    $cordovaKeyboard.close()
};