How to Retain Cursor Position in a ContentEditable `` Across Browsers?-JS Tutorial-php.cn

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

Set Cursor Position on ContentEditable

Setting the cursor position within a contentEditable

can be challenging across various browsers. Default behavior typically places the cursor at the beginning of the text, regardless of the last known position. To overcome this challenge, a tailored solution is required.

Cross-Browser Solution

To address this issue, consider the following solution:

Store the current cursor position when focus is lost using the saveSelection() function.
Re-establish the selection when focus is regained using the restoreSelection() function.

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();
        }
    }
}

Copy after login

Click Event Handling (Optional)

By default, clicking within the contentEditable

will move the cursor to the clicked location. If you prefer to maintain the stored cursor position even on click, cancel the onclick and onmousedown events using the following function:

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

Copy after login

Usage

Incorporate these functions into your code by attaching saveSelection() to the onmouseup and onkeyup events of the

, and restoreSelection() to the onfocus event. Optionally, attach the cancelEvent() function to the onclick and onmousedown events to preserve cursor position on clicks.

This solution provides a comprehensive and cross-browser approach to retain the cursor position within contentEditable

elements, enhancing user experience when working with editable regions.

The above is the detailed content of How to Retain Cursor Position in a ContentEditable `` Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：Is `.then(function(a){ return a; })` a No-Op in Promises? Next article：How Can You Disable HTML Links in Modern Browsers?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn