离子：专注于子标题上的输入字段使键盘隐藏列表元素答案

【问题标题】：Ionic: Focusing on input field on sub-header makes keyboard hide list-elements离子：专注于子标题上的输入字段使键盘隐藏列表元素
【发布时间】：2015-11-13 08:06:40
【问题描述】：

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

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

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

以下是代码的相关部分：

<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>

【问题讨论】：

这个兄弟你解决了吗？

标签： ionic-framework ionic soft-keyboard input-field

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

...
</ion-content>

    <div keyboard-attach>
    </div>

</ion-view>

我刚刚添加了这个带有键盘附加功能的 div。离子文档说键盘附加只适用于页脚，但它对我有用。我在iOS9上测试过。

【讨论】：