如何跨瀏覽器保留 ContentEditable 中的遊標位置？

在ContentEditable

上設定遊標位置

在contentEditable

上設定遊標位置跨各種瀏覽器可能具有挑戰性。預設行為通常會將遊標置於文字的開頭，無論最後的已知位置為何。為了克服這項挑戰，需要量身定制的解決方案。

跨瀏覽器解決方案

要解決此問題，請考慮以下解決方案：

• 當焦點遺失時，使用saveSelection () 函數儲存目前遊標位置。
• 當焦點重新獲得時，使用 RestoreSelection() 函數重新建立選擇。

function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

點擊事件處理（選用）

預設情況下，在contentEditable

內按一下遊標移到點擊的位置。如果您希望即使在單擊時也保持儲存的遊標位置，請使用以下函數取消onclick 和onmousedown 事件：

function cancelEvent(e) {
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

用法

將這些函數合併到您的程式碼將saveSelection() 附加到

的onmouseup 和onkeyup 事件，並將RestoreSelection() 附加到onfocus 事件。 （可選）將 cancelEvent() 函數附加到 onclick 和 onmousedown 事件，以保留單擊時的遊標位置。

此解決方案提供了一種全面的跨瀏覽器方法來保留 contentEditable

中的遊標位置。元素，增強使用可編輯區域時的使用者體驗。

以上是如何跨瀏覽器保留 ContentEditable 中的遊標位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！