JavaScript实现：在contenteditable div中模拟下箭头移动光标至下一行

Got it, let's solve this. The goal is to move the cursor from its current position to the start of the next <p> element in your contenteditable div, or add a new line if we're at the last one. Here's how to implement SomeMagicFunction:

function SomeMagicFunction() {
  const box = document.getElementById('box');
  const selection = window.getSelection();
  
  if (selection.rangeCount === 0) return;
  
  const currentRange = selection.getRangeAt(0);
  let currentNode = currentRange.commonAncestorContainer;
  
  // Traverse up to find the parent <p> element
  while (currentNode && currentNode.tagName !== 'P') {
    currentNode = currentNode.parentNode;
  }
  
  if (!currentNode) return;
  
  let nextParagraph = currentNode.nextElementSibling;
  
  // If there's no next paragraph, create a new empty one
  if (!nextParagraph || nextParagraph.tagName !== 'P') {
    nextParagraph = document.createElement('p');
    nextParagraph.textContent = '';
    box.appendChild(nextParagraph);
  }
  
  // Create a new range pointing to the start of the next paragraph
  const newRange = document.createRange();
  newRange.setStart(nextParagraph, 0);
  newRange.setEnd(nextParagraph, 0);
  
  // Update the selection and focus the div to show the cursor
  selection.removeAllRanges();
  selection.addRange(newRange);
  box.focus();
}

How this works: #

• We first grab the contenteditable element and the current user selection.
• We traverse up from the cursor's position to find the closest parent <p> tag (matching your HTML structure).
• We check if there's a valid next sibling <p>; if not, we create a new empty paragraph to move into.
• We create a new range pointing to the start of the target paragraph, update the selection, and focus the div to ensure the cursor is visible.

Notes: #

• This handles cases where the cursor is inside any part of a <p> element (whether at the start, middle, or end).
• If you're using other block elements instead of <p> (like <div>), just adjust the tagName !== 'P' checks to match your element type.
• The function does nothing gracefully if the cursor isn't inside a valid paragraph or if there's no active selection.

内容的提问来源于stack exchange，提问作者Kacper G.