时间戳

首页 > 解决方案 > 移动键盘可以在 Ionic 应用程序中始终打开吗？

angular - 移动键盘可以在 Ionic 应用程序中始终打开吗？

问题描述

在 Ionic 聊天应用程序的聊天页面中发送消息后，我想保持我的移动键盘始终打开。因为在单击发送按钮时，第一次单击时，键盘会下降，然后在第二次单击时，会发送消息。因此，这需要时间并且在 Ionic 3 应用程序中表现出滞后性。

有什么方法可以处理 Ionic 应用程序（Ionic 3/4）中的键盘问题？

标签： angularionic-frameworkionic3ionic4

解决方案

preventDefault() and stopPropagation()是有助于保持键盘打开的主要概念。为了完成这个功能，我在聊天页面的发送按钮中添加了#sendButton。并使用 ViewChild，

    @ViewChild('sendButton') private sendButton:Button;

然后，我将以下代码添加到我的 .ts 页面。并在 ngOnInit() 上调用此函数（也可以使用 ionViewDidLoad() 或 ionViewWillLoad()） 

keepKeyboardVisible() {
    if(!!this.sendButton){
        let el = this.sendButton._elementRef.nativeElement;
        console.log(el);
        el.addEventListener('click', (event) => {
            this.stopBubble(event);
        });
        el.addEventListener('touchdown', (event) => {
            this.stopBubble(event);
        });
        el.addEventListener('touchmove', (event) => {
            this.stopBubble(event);
        });
        el.addEventListener('touchstart', (event) => {
            this.stopBubble(event);
        });
        el.addEventListener('touchend', (event) => { //Triggered by a phone
            this.stopBubble(event);
            this.sendMessage();
        });
    }
}

stopBubble(event) {
    console.log(event);
    event.preventDefault(); 
    event.stopPropagation(); //Stops event bubbling
}

推荐阅读