【问题标题】:Can mobile keypad always be opened in Ionic application?移动键盘可以在 Ionic 应用程序中始终打开吗?
【发布时间】:2020-04-18 14:29:16
【问题描述】:

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

有什么方法可以处理 Ionic 应用程序(Ionic 3/4)中的键盘问题?

【问题讨论】:

标签: angular ionic-framework ionic3 ionic4


【解决方案1】:

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
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-09-19
    • 1970-01-01
    • 1970-01-01
    • 2021-08-20
    • 1970-01-01
    • 1970-01-01
    • 2022-10-09
    相关资源
    最近更新 更多