可编辑DIV与移动端软键盘兼容性问题汇总

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

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使其获取光标

在IOS系统中，无法通过代码主动触发focus事件，只能通过用户手动触发

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

 

6. 使用伪元素模拟placeholder效果

    .eidt-area__main:empty:before{
        content: attr(ph);
        color:#999;
        font-size: .427rem;
    }
    .eidt-area__main:focus:before{
        content: none;
    }

 

7.可编辑div中防止单个单词过长，或单行英文过长导致布局错乱

word-wrap: wrap;
word-break:  keep-all;

 

8.在可编辑div中禁止右键弹出菜单活长按弹出菜单

为可编辑div添加属性 oncontextmenu="window.event.returnValue=false"

<div id="write-box" class="write-box" :class="{'write-box-over': wordCount > wordMax}" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" ph="请在此处输入你的答案" contenteditable="plaintext-only" onpaste="return false;" oncopy="return false;" oncut="return false" @input="checkInput" oncontextmenu="window.event.returnValue=false"></div>

 

9. 在文章中嵌入可编辑div导致编辑的文字和文章的文字水平未居中

在外层盒子中使用 vertical-align做垂直对齐设置

 

10.  需求： 在可编辑div输入框光标后面显示词数

使用  :after 伪元素，为可编辑DIV添加属性count

    .write-box::after{
        content: attr(count);
        color: #999;
        font-size: 0.427rem;
        line-height: 0.4rem;
    }

 

11. 可编辑DIV光标定位至最后

let oDiv = document.querySelector('#write-box');
oDiv .focus();
var range = window.getSelection();//创建range
range.selectAllChildren(oDiv);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后