DIV 粘貼插入文本或者其他元素後,移動游標到最新處

來源:互聯網
上載者:User

標籤:

此文主要是可編輯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 粘貼插入文本或者其他元素後,移動游標到最新處

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.