How to Set Cursor Position in Content-Editable Element using JavaScript?

Last Updated : 14 Oct, 2024

To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.

Approach:

First, create a Range and set the position using the above syntax.
Get user input from the input tag using jQuery
```
$("input']").val();
```
On the button click assign input value to range function to return cursor position on div.

Syntax:

// document.createRange() creates new range object
letrangeobj = document.createRange();

// Here 'rangeobj' is created Range Object
letselectobj = window.getSelection();

// Here 'selectobj' is created object for window
// get selected or caret current position.
// Setting start position of a Range
rangeobj.setStart(startNode, startOffset);

// Setting End position of a Range
rangeobj.setEnd(endNode, endOffset);

// Collapses the Range to one of its
// boundary points
rangeobj.collapse(true);

// Removes all ranges from the selection
// except Anchor Node and Focus Node
selectobj.removeAllRanges();

// Adds a Range to a Selection
selectobj.addRange(rangeobj);

Example 1: Below example illustrate how to set caret cursor position on content-editable element div based on user input.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    
    <style>
        div {
            outline-color: red;
            caret-color: red;
            color: #ddd;
            width: 550px;
            text-align: justify;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;padding:13px;">
            GeeksforGeeeks
        </h1>
        <br>
        
        <div id="editable" contenteditable="true"
                    spellcheck="false">
            HTML stands for Hyper Text Markup Language.
            It is used to design web pages using markup 
            language. HTML is the combination of Hypertext
            and Markup language. Hypertext defines the link 
            between the web pages. Markup language is used 
            to define the text document within tag which 
            defines the structure of web pages. HTML is a 
            markup language which is used by the browser
            to manipulate text, images and other content 
            to display it in required format.
        </div>
        <br/>
        
        <input type="number" name="position" min="0"
                value="0" max="470" />
        
        <button>Position Cursor</button>
    </center>

    <script>
        function setCursor(pos) {
            let tag = document.getElementById("editable");
            
            // Creates range object
            let setpos = document.createRange();
            
            // Creates object for selection
            let set = window.getSelection();
            
            // Set start position of range
            setpos.setStart(tag.childNodes[0], pos);
            
            // Collapse range within its boundary points
            // Returns boolean
            setpos.collapse(true);
            
            // Remove all ranges set
            set.removeAllRanges();
            
            // Add range with respect to range object.
            set.addRange(setpos);
            
            // Set cursor on focus
            tag.focus();
        }
    
        $('button').click(function() {
            let $pos = $("input[name='position']").val();
            setCursor($pos);
        });
    </script>
</body>

</html>

 
<!DOCTYPE html>
<html lang="en">​<head>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">​    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>        <style>        div {            outline-color: red;            caret-color: red;            color: #ddd;            width: 550px;            text-align: justify;            border: 2px solid red;        }    </style></head>​<body>    <center>        <h1 style="color:green;padding:13px;">            GeeksforGeeeks        </h1>        <br>                <div id="editable" contenteditable="true"                    spellcheck="false">            HTML stands for Hyper Text Markup Language.            It is used to design web pages using markup             language. HTML is the combination of Hypertext            and Markup language. Hypertext defines the link             between the web pages. Markup language is used             to define the text document within tag which             defines the structure of web pages. HTML is a             markup language which is used by the browser            to manipulate text, images and other content             to display it in required format.        </div>        <br/>                <input type="number" name="position" min="0"                value="0" max="470" />                <button>Position Cursor</button>    </center>​    <script>        function setCursor(pos) {            let tag = document.getElementById("editable");                        // Creates range object            let setpos = document.createRange();                        // Creates object for selection            let set = window.getSelection();                        // Set start position of range            setpos.setStart(tag.childNodes[0], pos);                        // Collapse range within its boundary points            // Returns boolean            setpos.collapse(true);                        // Remove all ranges set            set.removeAllRanges();                        // Add range with respect to range object.            set.addRange(setpos);                        // Set cursor on focus            tag.focus();        }            $('button').click(function() {            let $pos = $("input[name='position']").val();            setCursor($pos);        });    </script></body>​</html>

Output:

Example 2: Below example illustrates how to set caret cursor position on content-editable element div.