码迷,mamicode.com
首页 > 其他好文 > 详细

div光标定位问题总结

时间:2014-11-28 14:01:23      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   for   on   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光标定位问题总结

标签:style   blog   io   ar   color   sp   for   on   div   

原文地址:http://www.cnblogs.com/kongxs/p/4128208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!