在混合开发中软键盘引起的布局问题input与可编辑DIV兼容性问题汇总

Posted 2021-02-07 pomelott

此文复现的所有兼容性问题均为以下情况：

1. 腾讯X5内核

2. 全屏webview

 

问题如下：

1. IOS12 中软键盘弹出导致页面顶部截断，并且无法恢复。

解决方法：添加交互事件，调用本地方法，在键盘收起后执行页面回滚操作。

bridgeClass.jsEventHook.keyboardWillShow = function () {
      // 添加flag 是因为 有多个空时，切换输入框也会调用WillHide
      switchFlag = true;
};

bridgeClass.jsEventHook.keyboardWillHide = function() {
     switchFlag = false;
     setTimeout(() => {
        if (!switchFlag) {
             document.body.scrollTop = 0;
             document.body.style.height = document.body.clientHeight;
        }
     }, 50);
};

 

2. 页面中有多个可编辑DIV时，点击IOS系统中软键盘左上方的上下箭头会导致页面布局错乱

解决方法： 利用样式 user-modify 或者contentEditable，在整体页面中通时只存在一个可编辑DIV，从而变向禁止ios软键盘的上下箭头。

 

3. 获取可编辑DIV内容时，除获取到所需文本之外，空格可能会被解析为UTF-8， 出现乱码的情况。

解决方法： 使用encodeURI碱性转码，使用decodeURI或者decodeURIComponent获取标签的innerhtml内容并进行解码。（前提需要将多余的标签过滤掉）

 

4. IOS使用中文输入法输入英文时会出现多余的空格，并且出现乱码的情况。

解决方法： 同问题三的解决方法

 

5. 可编辑DIV在IOS中无法通过调用focus使其获取光标

解决方法： 是哦那个window.navigator.userAgent 匹配 Safari 做相应的交互处理

 

未完待续。。。