Set cursor position on contentEditable `<div>`

javascript

event-handling

dom-manipulation

browser-compatibility

byNikita Barsukov·Mar 6, 2025

To directly set the cursor inside a contentEditable <div>, use JavaScript's Range and Selection interfaces. Create and collapse a Range to the desired position, then place the Selection:

function setCursor(contentEditableElement, position) {
  let range = document.createRange(); // Everyone deserves a bit of personal space!
  let selection = window.getSelection();
  range.setStart(contentEditableElement, position); // Range, lock onto target!
  range.collapse(true); // It's always better to start from scratch.
  
  selection.removeAllRanges(); // Clear is the new black.
  selection.addRange(range); // Selection, engage!
}

// Usage to set the cursor to position index:
var editableDiv = document.querySelector('.editable');
setCursor(editableDiv.firstChild, 5); // Ha! New fit of "Position 5 boots".

Simply replace the position in setCursor to position the cursor anywhere within your element.

Cross-browser compatibility

While the above works great for recent browsers, maintaining compatibility across different browsers is crucial:

Use Rangy's selection module for handling selections across various browsers.
For Internet Explorer, consider IERange to convert the proprietary TextRange to a Range.
If you favor jQuery for its concise syntax, make sure you're using version 1.6 or higher.

Selection preservation amidst focus changes

Ensure uninterrupted user experience by maintaining cursor placement:

Use functions like saveSelection() and restoreSelection() to save and reapply the cursor position.
Preserve cursor location on blur events by implementing a captureSelection function with cursor markers for precise restoration.
Use the onkeyup event to update the selection as the user types within the <div>.

Event Handling

Precisely manage user interactions:

Handle onmousedown to maintain selection during user click interactions.
Add afterFocus callbacks for bonus capability after regaining focus.
Employ cancelEvent to stop default behavior upon events, ensuring stable cursor positioning.

Deep dive: DOM Manipulation for fun and profit

Getting to know Range and Selection

In the realm of JavaScript's Document Object Model, a Range object represents a fragment of your document that can contain nodes. A range has distinct start and end points, which you can define. Then, the Selection interface helps manipulate the user’s current text selection.

Marker Magic

When your contentEditable <div> includes child nodes or changes dynamically, positioning the cursor may seem challenging. Fear not! By inserting temporary markers during the blur event, you ensure the cursor restores right at the target.

The Cycle of Focus

Working with a contentEditable <div> demands attention to cursor behavior across focus changes. Cue the heavy lifters: saveSelection() and restoreSelection(). Bonus points for an isInFocus variable, helping you track focus like a hawk.

User Interactions and Event Handling

Who doesn't love drama-free user interactions? Proper event handling is the peace treaty between user clicks and cursor positioning. Techniques range from relegating default actions on mousedown and click events, to assuring the cursor holds its position, no matter how turbulent the clickstorm gets.

Navigating a world without jQuery

Those favoring vanilla JavaScript, fret not. Native JavaScript can deftly handle a contentEditable <div>. Just a matter of tuning the methods to use event listeners and DOM manipulations. Pro tip: This approach is very much in line with modern web development practices and standards.

Browser quirks? Bring 'em on!

It's no secret that browser-specific behaviours can spoil the party. But fear not, we've got you covered:

Libraries like Rangy are your friends for ironing out browser differences.
Catering to older versions of IE? Consider using IERange.
Look up reference scripts from battle-hardened developers like Nico Burns or timdown. Those folks know their stuff!