首页 > 代码库 > div光标定位问题总结

div光标定位问题总结

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>        <button type="button" onclick="document.getElementById(‘test‘).focus(); insertHtmlAtCaret(‘<b>INSERTED</b>‘);">插入字符</button>        <div contentEditable="true" style="height:50px; border:2px solid red;" id="test">&nbsp;</div>        <script>            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>

 

div光标定位问题总结