1. 背景
最近在开发中遇到这样一个问题：页面中有一个输入框input，一个 Modal 框modal，一个点击打开 Modal 框的按钮btnOpenModal，和一个提交表单的提交按钮submit。当input获得焦点，键盘弹出时，如果直接点击btnOpenModal，input会失去焦点键盘收回，导致页面高度改变，modal弹出后会有一个闪烁。所以需要在点击btnOpenModal时，判断当前键盘是否弹出。
2. 方案
最初，考虑在点击按钮时获取输入框元素，判断它是否处于focus状态，来判断键盘是否已弹出。但点击按钮之后，按钮就成为了document.activeElement。此时输入框必然已失去焦点，导致无法通过该方法判断键盘是否弹出。
考虑监听输入框的focus和blur两个事件，当focus触发时，为当前视图容器this.cnt添加一个标识class，假设为KEYBOARD_STATUS；当blur触发时，则移除该class。当点击btnOpenModal时，判断this.cnt是否拥有KEYBOARD_STATUS这个class。如果有，则说明当前键盘处于弹出状态，则需要手动触发input.blur()，然后再打开modal。否则，直接打开modal。
最终实现代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const timeout: number = 500， KEYBOARD_STATUS: string = 'KEYBOARD_OPEN'; input.on('focus', () => { this.cnt.addClass(KEYBOARD_STATUS); }); input.on('blur', () => { setTimeout(() => { this.cnt.removeClass(KEYBOARD_STATUS); }, timeout); }); function closeKeyboardAndGetDelay (): number { let delay: number = 0; if (this.cnt.hasClass(KEYBOARD_STATUS)) { $('input').blur(); delay = timeout; } return delay; } btnOpenModal.on('click', () => { // 避免屏幕高度未恢复导致的modal显示闪烁 const delay: number = this.closeKeyboardAndGetDelay(); setTimeout(() => { modal.show({ params }); }, delay); }); |
3. 总结
经过测试，顺应上述思路实现的代码可以解决因键盘已弹出导致打开 Modal 框会闪烁的问题。
注：转载注明出处并联系作者，本文链接：https://nodefe.com/webview-check-keyboard-popup/