取得contentEditable 元素中的插入符位置可能是一個挑戰，但了解底層技術對於建立互動式文字編輯器至關重要。
為了確定插入符位置，有幾種方法，每種方法都適合不同的瀏覽器功能。一種常見的方法是在 Firefox、Chrome 和 Safari 等現代瀏覽器中使用 Selection 物件。以下程式碼片段示範了這種方法：
function getCaretPosition(editableDiv) {
var caretPos = 0;
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
return caretPos;
}對於不支援 Selection 物件的舊版瀏覽器，可以使用 document.selection.createRange 方法作為替代方法。下面的程式碼示範了這個方法：
function getCaretPosition(editableDiv) {
var caretPos = 0;
if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}取得插入符號位置後，您可以使用它來執行各種任務，例如：
請記住，不同的瀏覽器可能需要不同的技術來準確地確定插入符位置，因此選擇合適的方法對於跨瀏覽器相容性至關重要。
以上是如何檢索內容可編輯元素中的插入符位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
