js 在div游標位置加入內容
阿新 • • 發佈：2018-12-21
完整程式碼，可以自己測試
div指定位置插入內容
<html> <head></head> <body> <img id="pic" src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCryu2pcxCAARiAATIIZaZ08qaakQY" /> <div contenteditable="true" style="height:50px; border:2px solid red;" id="test"> 說了的飛機上了的解放了時間發了說了的房間裡水電費就 </div> <script type="text/javascript"> var aa = document.getElementById('pic') aa.onclick = function(){ var a = this; //alert(a) insertHtmlAtCaret(a) } function insertHtmlAtCaret(html) { var 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) var el = document.createElement("div"); //el.innerHTML = html; el.appendChild(html) var 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); } } </script> </body> </html>
textarea 游標位置輸入內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無標題文件</title> </head> <body> <script type="text/javascript"> function setCaret(textObj) { if (textObj.createTextRange) { textObj.caretPos = document.selection.createRange().duplicate(); } } function insertAtCaret(textObj, textFeildValue) { if (document.all) { if (textObj.createTextRange && textObj.caretPos) { var caretPos = textObj.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue; } else { textObj.value = textFeildValue; } } else { if (textObj.setSelectionRange) { var rangeStart = textObj.selectionStart; var rangeEnd = textObj.selectionEnd; var tempStr1 = textObj.value.substring(0, rangeStart); var tempStr2 = textObj.value.substring(rangeEnd); textObj.value = tempStr1 + textFeildValue + tempStr2; } else { alert("This version of Mozilla based browser does not support setSelectionRange"); } } } </script> <form id="form1" action="" onsubmit="" method="post" enctype="text/plain"> <p> <textarea name="tarea" rows="" cols="" style="width:300px;height:120px;" onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);">例子例子例子例子例子</textarea> <br /><br /> <input type="text" name="textfield" style="width:220px;" value="插入FireFox" /> <br /> <input type="button" value="插入" onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);" /> </p> </form> <div id="box" contenteditable="true" style="border:1px solid #ccc; width:300px; height:200px;"> sljfldjfldf </div> </body> </html>
感謝網友貢獻