分类: 技术

WebView 中判断键盘是否弹出

1. 背景

最近在开发中遇到这样一个问题:页面中有一个输入框input,一个 Modal 框modal,一个点击打开 Modal 框的按钮btnOpenModal,和一个提交表单的提交按钮submit。当input获得焦点,键盘弹出时,如果直接点击btnOpenModalinput会失去焦点键盘收回,导致页面高度改变,modal弹出后会有一个闪烁。所以需要在点击btnOpenModal时,判断当前键盘是否弹出。

2. 方案

最初,考虑在点击按钮时获取输入框元素,判断它是否处于focus状态,来判断键盘是否已弹出。但点击按钮之后,按钮就成为了document.activeElement。此时输入框必然已失去焦点,导致无法通过该方法判断键盘是否弹出。

考虑监听输入框的focusblur两个事件,当focus触发时,为当前视图容器this.cnt添加一个标识class,假设为KEYBOARD_STATUS;当blur触发时,则移除该class。当点击btnOpenModal时,判断this.cnt是否拥有KEYBOARD_STATUS这个class。如果有,则说明当前键盘处于弹出状态,则需要手动触发input.blur(),然后再打开modal。否则,直接打开modal

最终实现代码如下:

3. 总结

经过测试,顺应上述思路实现的代码可以解决因键盘已弹出导致打开 Modal 框会闪烁的问题。

注:转载注明出处并联系作者,本文链接:https://nodefe.com/webview-check-keyboard-popup/

发表评论

评论

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax