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

此文复现的全部兼容性问题均为如下状况：javascript

1. 腾讯X5内核html

2. 全屏webviewjava

问题以下：web

1. IOS12 中软键盘弹出致使页面顶部截断，而且没法恢复。api

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

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软键盘的上下箭头。spa

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

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

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

原文出处：https://www.cnblogs.com/pomelott/p/10343107.html