js在光标处插入任意内容
来源：原创
时间：2015-08-26
作者：脚本小站
分类：JS/JQuery
在做留言板时会用到在光标定位处插入一些内容，可能是表情或文字。实现这个功能就要用到下面这个函数。
调试时在输入框中输入一些内容，再在文字中间点击插入，可以看到预定义文字被插入到光标处。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js在光标处插入任意内容</title>
</head>
<body>
<div contentEditable="true" style="height:50px;width:500px;border:2px solid red;" id="test"> </div>
<button type="button" id="btn" >插入</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function (){
insertHtmlAtCaret('任意内容 包括图片');
}
//将内容插入到光标处
function insertHtmlAtCaret(html) {
var sel, range;
if (window.getSelection){
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
</script>
</body>
</html>