如何跨浏览器保留 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

中单击

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

分区>会将光标移动到单击的位置。如果您希望即使在单击时也保持存储的光标位置，请使用以下函数取消 onclick 和 onmousedown 事件：

用法

将这些函数合并到通过将 saveSelection() 附加到

的 onmouseup 和 onkeyup 事件以及 RestoreSelection() 来编写代码到 onfocus 事件。 （可选）将 cancelEvent() 函数附加到 onclick 和 onmousedown 事件，以保留单击时的光标位置。此解决方案提供了一种全面的跨浏览器方法来保留 contentEditable

中的光标位置。元素，增强使用可编辑区域时的用户体验。

以上是如何跨浏览器保留 ContentEditable 中的光标位置？的详细内容。更多信息请关注PHP中文网其他相关文章！