js中对可编辑的div进行光标位置插入内容，和移动光标到最后

最新推荐文章于 2023-05-14 15:26:13 发布

看淡江湖

最新推荐文章于 2023-05-14 15:26:13 发布

阅读量6.6k

点赞数 5

分类专栏： js

本文链接：https://blog.csdn.net/hhy1006894859/article/details/89920899

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

直接上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100%;
            height: 200px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div id="box" contenteditable="true"></div>
<button>插入指定内容</button>
<button>移动光标到最后</button>
</body>
</html>
<script>
    function insertHtmlAtCaret(html) {
        let 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)
                let el = document.createElement("div");
                el.innerHTML = html;
                let 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);
        }
    }

    var btn1 = document.getElementsByTagName('button')[0];
    var btn2 = document.getElementsByTagName('button')[1];
    btn1.onclick = function () {
        insertHtmlAtCaret('这是在光标处插入的内容！')
    }
    btn2.onclick = function () {
        // 将获得焦点的光标移动到最后的输入位置
        let range = document.createRange();
        range.selectNodeContents(document.getElementById('box'));
        range.collapse(false);
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
</script>

看淡江湖

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
js中对可编辑的div进行光标位置插入内容，和移动光标到最后

直接上代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
复制链接

扫一扫

专栏目录