在Ionic 2中,如何在键盘显示时将元素浮动到键盘上方？

Question

当键盘显示时,我希望我的消息输入栏浮动在键盘上方,但看起来在Ionic 2中没有键盘附加指令(如v1)(可能在工作中？).有没有替代/解决方法？

目前的行为:

通缉行为:

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

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

Answer 1

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

当您在浏览器中检查<ion-item>with <ion-input>(调试使用Safari for IOS)时,您会发现离子生成<div class='input-cover'>具有样式的position: absolute;.

编写一个覆盖它的CSS,如下所示

.input-cover {
  position: static;
}

这对我来说很有把握,现在当你专注于一个输入字段时,它会滚动到视图中并且不再隐藏在键盘下方,所有这些都可以使黄油变得平滑.

Answer 2

我还需要实现这一点.我做到了,它完美无缺.

1,你需要使用cordova插件键盘,并在开始通话时 cordova.plugins.Keyboard.disableScroll(true);,键盘不会推动您的视图.第二,你需要在键盘显示和键盘上使用处理程序隐藏这样的事件:

cordova.plugins.Keyboard.disableScroll(true);
                    window.addEventListener('native.keyboardshow', this.dispatchMe);
                    window.addEventListener('native.keyboardhide', this.dispatchMeHide);

    dispatchMe(e) {
        var event = new CustomEvent('keyboardShown');
        event['keyboardHeight'] = e.keyboardHeight;
        document.dispatchEvent(event);
    }

    dispatchMeHide() {
        var event = new CustomEvent('keyboardShown');
        event['closed'] = true;
        document.dispatchEvent(event);
    }

你可以从这样的事件中观察:

this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown');

比你能听到那个可观察的.如果键盘打开,则更改显示消息的容器高度.你基本上必须降低键盘的高度.我就是这样做的

this.chatService.keyboardObservable
            .subscribe(data => {
                if (data.closed) {
                    this.sectionHeight = 85 + '%';
                    this.inputBottom = 0 + '%';
                }
                else {
                    this.docHeight = document.body.clientHeight;
                    this.sectionHeight = ((this.docHeight - data.keyboardHeight - (document.getElementById('toptoolbar').clientHeight + document.getElementById('inputchat').clientHeight)) / this.docHeight) * 100 + '%';
                    this.inputBottom = data.keyboardHeight / this.docHeight * 100 + '%';
                }

            });

并使用ngStyle更改这些属性

[ngStyle]="{'height': sectionHeight}"

我也需要这个用于chatapp,现在它完美运行(即使你旋转屏幕纵向/横向模式),输入总是漂浮在键盘上方,就像在原生应用程序中一样:)

我希望这能帮到您!