此文复现的所有兼容性问题均为以下情况：
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 = ;
document.body.style.height = document.body.clientHeight;
}
}, );
};
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();//光标移至最后