首页 新闻 搜索 专区 学院

如何指定div根据光标插入内容

0
悬赏园豆:10 [待解决问题]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<button type="button" onclick="insertHtmlAtCaret('<span>插入成功</span>');">插入字符
</button>
<div contentEditable="true" id="test1" style="height:50px; border:2px solid red;" >111111111111111111111111</div>
<div contentEditable="true" style="height:50px; border:2px solid red;" >222222222222222222222222</div>
<script>
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                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);
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            document.selection.createRange().pasteHTML(html);
        }
    }
</script>

现在有两个div,点击哪个div然后再点插入内容,就会把内容插入光标所在的地方,但是能否让他插入指定id = test1 的div光标里,如果没有点击光标就插入到 test1 的最尾部,求大神帮忙修改下

-JackoChan的主页 -JackoChan | 初学一级 | 园豆:162
提问于:2016-11-22 10:28
< >
分享
所有回答(1)
0

div上哪來的光標..

RosonJ | 园豆:4234 (老鸟四级) | 2016-11-22 11:27
contentEditable="true" 加入这个标签后,就可以输入文字了
支持(0) 反对(0) -JackoChan | 园豆:162 (初学一级) | 2016-11-22 11:35

@-JackoChan: 

FYI

http://www.examplet.org/jquery/caret.php

支持(0) 反对(0) RosonJ | 园豆:4234 (老鸟四级) | 2016-11-22 11:42

@RosonJ: 这个是input框的,不过还是非常感谢你的帮忙

支持(0) 反对(0) -JackoChan | 园豆:162 (初学一级) | 2016-11-22 12:27
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册