在webView 编辑中，对于键盘遮挡是一个非常头疼的事情，一般做法有：
一、采用控制 WebView 可视区域与键盘的高度关系，并实时的滑动 WebView
注：原始空间 frame 变化频繁，容易在复杂UI情况下照常 controller逻辑过于复杂
二、通过JS获取光标位置，并计算与WebView坐标位置，然后与键盘高度的关系进行换算
注：换算过程容易造成WebView 抖动问题
三、纯粹通过 JS 控制光标显示位置，通过JS 实现window滑动
经过多个方案实现比较，方案三实现存储 JS控制，容易维护，并且效果是最优的一种。
WebView 设置可编辑
contenteditable 是将html中某一标签设置成可编辑状态，允许调起键盘输入内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
${script}
</head>
<body style="margin:0px;background:#FFFFFF">
<div id="main" style="padding-left:10px; margin-left:10px;margin-right:10px;font-size:16px" contenteditable="true">
${content}
</div>
</body>
</html>
避免键盘遮挡
1、通过 JS 监听 input 输入事件，每一次自动调整window滑动位置
2、获取光标位置，采用临时插入 <span>标签，获取其坐标，然后在从父节点将其删除。
注：
- 在正常字符输入，获取当前光标位置可以通过
var sel = document.getSelection(); // change the selection
var ran = sel.getRangeAt(0); // into a range
var rec = ran.getClientRects()[0];
var top = rec.top; // Y coord of selection top edge
var bottom = rec.bottom; // Y coord of selection bottom edge
var left = rec.left; // X coord of selection left edge
var right = rec.right; // X coord of selection right edge
-
但是在输入换行符时，该方法就无法实现准确获取坐标位置了，只能通过取巧的方式，临时插入 <span>标签 的方法
var gCursorOffset = 200;
function setCursorOffset(offset) {
// 设置光标 相对于顶部 的偏移量
if (offset > 0 ) {
gCursorOffset = offset;
}
}
// 获取当前光标的位置坐标
function getCursorPosition() {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var span = document.createElement('span');
range.collapse(false);
range.insertNode(span);
var topPosition = span.offsetTop;
var spanParent = span.parentNode;
spanParent.removeChild(span);
// spanParent.normalize();
return topPosition;
}
function autoScroll(y)
{
var position = getCursorPosition();
console.log('position: ' + position);
window.scrollTo(0,position - gCursorOffset);
}
// 监听输入事件
document.addEventListener("input", function(e){
autoScroll();
},false);
