iOS上的Ionic Framework中的键盘问题

Question

我正在构建一个应用程序，用户可以在其中向另一个用户发送消息。下图是聊天视图的图片：第一个没有键盘，第二个是我触摸输入区域和键盘弹出时。

以下视图的html如下所示：

<ion-view>
<ion-nav-bar class="bar-stable">
    <h1 class="title ng-binding" style="margin-left: 15%;">{{name}}</h1>
</ion-nav-bar>
 <ion-scroll direction="y" style="height: 100%; margin-left:7px; margin-right: 7px; bottom: 75px;">
    <div style="height: 120px"></div>
<div class="inbox-chat" style="position: relative" ng-repeat="text in message">
<ol>
    <li ng-repeat="core in text.Messages" ng-class="{'user_message': core.sender === userId, 'other_message': core.sender !== userId}">
        <div class="messages-chat">
            {{core.message}}
        </div>
    </li>
</ol>
</div>
</ion-scroll>
    <div class="tools-message">
    <div class="sendText_chat">
        <input type="text" name="messageContent" ng-model="messageContent" placeholder="Message" required style="position:relative;  bottom: 10px;"/>
    </div>

    <button class="messageSend_chat" ng-click="sendMessage()"> Send! </button>
    <div class="back-button-message"><button back-button>Back</button></div>
    </div>

我的问题：如何改进我的代码，以便整个工具消息div高于键盘？我把它放在离子卷轴之外，因为我无法找到任何其他方式只留在一个地方。

Answer 1

如果该消息输入框位于<ion-footer>，您可以使用属性keyboard-attach =＆＃39; true＆＃39;

<ion-footer keyboard-attach='true' >

确保使用最新的离子版本。

Answer 2

我已经整理了一个小的codepen示例，以展示如何设置聊天室的样式并将输入字段拉到底部。 基本上你需要应用两个css类来调整输入容器的高度。

.tools-message {
  position: absolute;
  width: 100%;
  bottom: 0;
  border: solid 1px;
  height: 80px;  
}

.has-bottom {
    bottom: 80px !important;
}

http://codepen.io/arielfaur/pen/yNyrez/