為什么要在contentEditable=true的div里面獲取光標呢？因為這篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我們知道想在一個內容里面插入一個新的內容，如果這個新的內容是段html代碼。最后顯示的是有樣式的。那么用input是無法實現的。
所以我們考慮用contentEditable=true的div。在這里面輸入的html就沒問題啦。
————————————————
版權聲明：本文為CSDN博主「夏天想」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_33769914/article/details/93596502
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>獲取焦點位置並在焦點位置插入指定內容</title>
</head>
<body>
<div contenteditable="true" class="fxAnswer" οnblur="getblur()"></div>
<input type="text" id="text" placeholder="想要添加進去的內容"/>
<button type="button" id="btn">添加</button>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
var sel,range;
var textContent;
//失去焦點時獲取光標的位置
function getblur(){
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
}
//在復雜公式的div contenteditable=true的位置獲取焦點並插入內容
function insertHtmlAtCaret(html){
if (window.getSelection) {
// IE9 and non-IE
if (sel.getRangeAt && sel.rangeCount) {
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);
// 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);
}
textContent=$(".fxAnswer").html();//這個也很重要。因為如果不寫可能就會覆蓋了原來內容替換成你添加的。或者是干脆不顯示了。textContent是全局變量是你輸入的內容。
}
//如果默認沒有獲取焦點，你去直接寫內容點添加可能報錯。因為他沒有走失去焦點函數。sel和range還沒有定義呢。就會報錯。加上$(".fxAnswer").focus();這句讓他默認就獲取焦點就能解決這個報錯。
//如果你去先把焦點放在可編輯的div，再失去焦點此時sel和range就已經賦值了，就沒問題。
//$(".fxAnswer").focus();
$("#btn").click(function(){
textContent=$("#text").val();
insertHtmlAtCaret(textContent)
})
</script>
</body>
</html>
直接上代碼了。
自己輸入的內容插入到光標的位置。
在你輸入你想插入的內容之前就觸發可編輯的div的失去焦點事件。此時光標的位置就獲取到了。然后你插入內容的時候直接在剛才失去光標的地方就可以了。所以這里sel和range都是全局變量。insertHtmlAtCaret這個函數里直接用的是失去焦點時定義的那個sel和range。
————————————————
版權聲明：本文為CSDN博主「夏天想」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_33769914/article/details/93596502