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

问题描述

当键盘显示时，我希望我的信息输入栏浮动在键盘上方，但看起来好像没有键盘Ionic 2中的-attach指令（ v1 ）（可能正在开展工作？）。有没有替代/解决方法？

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.

使用< ion-input>检查< ion-item> 时; 在浏览器中（调试使用Safari for IOS）你可以发现离子产生< div class ='input-cover'> 风格的位置：绝对; 。

编写一个覆盖它的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屋！