在 Ionic 2 中，如何在键盘显示时将元素浮动到键盘上方? | 如何在键盘显示时将元素浮动到键盘上方

本文介绍了在 Ionic 2 中，如何在键盘显示时将元素浮动到键盘上方?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望我的消息输入栏在键盘显示时浮动在键盘上方，但看起来没有键盘-attach 指令(类似 v1)在 Ionic 2 中(可能正在开发中?).是否有任何替代/解决方法?

当前行为:

想要的行为:

这是我的消息输入栏的代码:

解决方案

我找到了一个适用于 IOS 的解决方案.

当您在浏览器中使用 <ion-input> 检查 <ion-item>(调试使用 Safari for IOS)时，您会发现 ionic 生成一个

，其样式为 position: absolute;.
编写一个覆盖它的 CSS，如下所示
.input-cover {位置:静态；}
这对我有用，现在当您专注于输入字段时，它会滚动到视图中并且不再隐藏在键盘下方，这一切都非常顺利.
I want my message input bar to float above the keyboard when the keyboard shows but it looks like there's no keyboard-attach directive (like v1) in Ionic 2 yet (maybe in the works?). Is there any alternative/workaround?
Current behaviour:
Wanted behaviour:
Here's the code of my message input bar:
<ion-toolbar position="bottom" *ngIf="userIsAdmin">

    <form (ngSubmit)="onSubmit(f)" #f="ngForm" class="message-form">

        <ion-badge class="message-form-badge">Admin</ion-badge>

        <ion-input type="text" placeholder="Type a message..." ngControl="messageInput"></ion-input>

        <button type="submit" small class="message-form-button">Send <ion-icon name="send"></ion-icon></button>

    </form>

</ion-toolbar>
 解决方案 
I found a solution which works for me on IOS.
When you inspect the <ion-item> with <ion-input> in the browser(debugging use Safari for IOS) you can find that ionic generates a <div class='input-cover'> which has the style position: absolute;.
Write a CSS which overrides this as below
.input-cover {
  position: static;
}
This did the trick for me and now when you focus on an input field, it scrolls into view and does not hide below the keyboard anymore and all this works buttery smooth.
                        这篇关于在 Ionic 2 中，如何在键盘显示时将元素浮动到键盘上方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！