How to Set Cursor Position in Content-Editable Element using JavaScript? Last Updated : 14 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. 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. 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/> <button>Position Cursor</button> </center> <script> function positionCursor() { 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], 12); // 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() { positionCursor(); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to align text content into center using JavaScript ? V VigneshKannan3 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions jQuery-Questions Similar Reads How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read How to align text content into center using JavaScript ? In this article, we will align the text content into the center by using JavaScript. We use HTML DOM style textAlign property to set the alignment of text. The DOM style textAlign property is pretty much similar to the text-align property in the CSS, and the Dom textAlign property returns the horizo 1 min read How to create editable div using JavaScript ? In this article, we will be explaining to you how to create an editable div using HTML, CSS, and JavaScript. An editable div is one on which is you will click then it will generate an editable text area to edit or to write any text on your browser itself. After editing, when you click on somewhere e 3 min read How to find the position of HTML elements in JavaScript ? In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is 3 min read Like