码迷,mamicode.com
首页 > 移动开发 > 详细

DIV 粘贴插入文本或者其他元素后,移动光标到最新处

时间:2016-05-16 19:43:29      阅读:1010      评论:0      收藏:0      [点我收藏+]

标签:

此文主要是可编辑div光标位置处理

1:首先 设置一个可编辑的DIV,注意:设置 contenteditable="true" 才可以编辑DIV

 <div id="talkContent" style="resize: none;height:150px;overflow:auto" contenteditable="true"></div>

2:移动光标js方法

//聊天内容框 插入文本或者其他元素后,移动置光标到最新处
function insertHtmlAtCaret(childElement) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            var el = document.createElement("div");
            el.appendChild(childElement);
            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") {
        // IE < 9
        //document.selection.createRange().pasteHTML(html);
    }
}

3:从光标现在的位置追加文本,成功后,光标在追加的文本后面

    insertHtmlAtCaret(document.createTextNode(‘这里是要追加的文本’));

4:从光标现在的位置追加元素,成功后,光标在追加的元素后面

  var new_img = document.createElement(‘img‘);
    new_img.setAttribute(‘src‘, ‘这是图片地址‘);
    new_img.style.maxWidth = "200px";
    new_img.style.maxHeight = "120px";
    insertHtmlAtCaret(new_img);

 

DIV 粘贴插入文本或者其他元素后,移动光标到最新处

标签:

原文地址:http://www.cnblogs.com/fj99/p/5499113.html

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