DEV Community

Yusuke Takei
Yusuke Takei

Posted on • Updated on

How to set caret on a node in a contenteditable element

#tutorial #javascript #typescript

Secret

You CANNOT set the caret on a contenteditable element only by foucs() on the element.

Code Sample

JavaScript 

const setCaret = (
  contenteditableElement,
  node,
  position
) => {
  const selection = window.getSelection();
  if (!selection) return;

  // Create a new range
  const range = document.createRange();
  range.setStart(node, position);
  range.collapse(true);

  // Remove the current range
  selection.removeAllRanges();

  // Add the new range
  selection.addRange(range);

  // Focus on the contenteditable element instead of the node if needed.
  contenteditableElement.focus();
};
Enter fullscreen mode Exit fullscreen mode

TypeScript 

const setCaret = (
  contenteditableElement: HTMLElement,
  node: Node,
  position: number
): void => {
  const selection = window.getSelection();
  if (!selection) return;

  // Create a new range
  const range = document.createRange();
  range.setStart(node, position);
  range.collapse(true);

  // Remove the current range
  selection.removeAllRanges();

  // Add the new range
  selection.addRange(range);

  // Focus on the contenteditable element instead of the node if needed.
  contenteditableElement.focus();
};
Enter fullscreen mode Exit fullscreen mode

Detail 

range.collapse(true);
Enter fullscreen mode Exit fullscreen mode

sets Range.collapsed to true, which means the start and end points of the Range are at the same position.

References

Latest comments (0)

Read next

plazarev profile image

JavaScript News, Updates, and Tutorials: March 2024 Edition

Pavel Lazarev -

mattbrailsford profile image

Creating your own UI extension points in Umbraco v14 - Part 1: The Basics

Matt Brailsford -

prathamdupare profile image

API Routes in Next.js - Part 4

Pratham Dupare -

gcascio profile image

Dynamic breadcrumbs in Next.js using the app router

gcascio -