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