可编辑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();//光标移至最后