在 Ionic 2 中，如何在键盘显示时将元素浮动在键盘上方? [英] In Ionic 2, how to float an element above the keyboard when the keyboard shows?

问题描述

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

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?

当前行为:

想要的行为:

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

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>

推荐答案

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

I found a solution which works for me on IOS.

当您在浏览器中使用 检查 时(调试使用 Safari for IOS)，您会发现 ionic 生成一个 <div class='input-cover'>，其样式为 position: absolute;.

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

编写一个 CSS 来覆盖它，如下所示

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 中，如何在键盘显示时将元素浮动在键盘上方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！