当键盘出现时，ion-content不会重新调整大小。

Question

我有一个带有聊天功能的应用程序，它工作得很好，但有一个问题，当键盘出现时，ion-content不会调整到正确的高度，所以我想要滚动到顶部时会卡住，而头部则完全消失。这个视图包含头部、内容和底部，我想要的是底部出现在键盘上方，内容调整大小，使其适合头部和底部栏之间。我创建的视图如下：

<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
  <div class="loader-center" ng-if="!doneLoading">
    <div class="loader">
      <i class="icon ion-loading-c"></i>
    </div>
  </div>
  <div class="loader-center" ng-if="errorLoading">
    <div class="loader">{{'error_loading_messages'|translate}}</div>
  </div>
  <ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
    <ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
    <div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
      <div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
        <div class="message-detail">
          <span class="bold">{{message.postedBy.name}}</span>
        </div>
        <div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
        <img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
        <small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
      </div>
      <div class="cf"></div>
    </div>
  </ion-content>
  <ion-footer-bar class="bar-light message-footer">
    <button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
    <label class="item-input-wrapper" for="newmessage">
      <textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
    </label>
    <button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
  </ion-footer-bar>
</ion-view>

我尝试将keyboard-attach属性添加到ion-footer-bar中，但是这样做只会使页脚变得更大。而且页脚已经停留在键盘的上方，因此似乎不需要这样做。我遇到了以下情况，当我输入内容时，视图会再向上移动一点。

这是键盘显示时的情况: 这是键盘隐藏时的情况: 你们中有人知道如何在键盘出现时将ion-content调整为正常高度吗？

- Sietse

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Hisham

谢谢，但这并没有解决我的问题。我已经安装了插件，并将首选项添加到配置中，但没有任何改变。他和我的情况有所不同。在他的情况下，键盘会覆盖完整视图（包括页脚），而在我的情况下，视图会向上移动，因此标题和一半内容会掉落屏幕。 - Sietse

喜欢你的独白 :) - JackDev

@Sietse - 我正在使用 Ionic2 聊天应用程序时遇到类似问题。你找到任何解决方案了吗？ - hardikdevios

@hardik.shah 我找到了一个解决方案，但我不认为这是一个好的解决方案。我会写一个答案，列出我所做的事情，因为此时此刻，我不知道确切的解决方法。 - Sietse

解决方案可在 https://stackoverflow.com/questions/30898538/ionic-framework-keyboard-hides-input-field/46824656#46824656 上找到。 - Atif Hussain

Answer 1

我尝试了一些方法，问题似乎消失了，但我不认为解决方案是正确的，或者这是否实际上是解决问题的方法。因此，如果有更好的解决方案，请分享。我首先要做的事情是包含Ionic键盘插件以基于键盘获取事件。

在CSS中，我添加了：

.message-footer { min-height: 44px; }

在我的控制器中，我添加了以下代码：

$scope.$on('taResize', function (e, ta) {
    if(!ta || !footerBar) return;

    var taHeight = ta[0].offsetHeight + 10;
    var newHeight = (taHeight < 44) ? 44 : taHeight;

    scroller.style.bottom = newHeight + 'px';
    footerBar.style.height = newHeight + 'px';
});

- Sietse