Javascript 检测contenteditable div的第一行上的向上箭头

假设我们在下面介绍的两个div上工作

<div contenteditable="true">Header</div>
<div contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Nunc lobortis erat et rhoncus dictum. Suspendisse luctus
</div>

标题
Lorem ipsum dolor sit amet，献祭精英
这是我的名言。悬钩子

Header和LoremIpsum是两个不同的contenteditable div。LoremIpsum不包含换行符<代码>溢出换行：断开单词用于打断上面的行

当我在

rhoncus

word上按向上箭头时，word希望向上移动一行，这是contenteditable的默认行为但是，当我按amet上的箭头时，我想聚焦标题div.

有没有办法检测这两种情况并以不同的方式处理

现在，只有在以下情况下，我才会转到另一个部门：

evt.keyCode==Key.arrowUp&&window.getSelection（）.anchorOffset==0

---

但它需要在第一行上单击额外的箭头，以便光标在聚焦另一个div之前转到行的开始处。

我认为这样做的一种方法是在

keyup

事件发生后，在光标点检查当前

文本内容的值

当您向上移动时，这将是一个空字符串（一旦正确修剪），在此基础上，您可以将焦点放在上一个
contenteditable
元素上

例如：

它可以工作，但会在行首引入奇怪的光标跳跃。知道如何避免吗？我不认为这个解决方案引入了跳跃。跳转是contenteditable框的自然行为。请格式化您的代码，使其正确显示：可以从4个空格开始，也可以将代码换行到“`”。。或者使用带括号的图标
。你找到了@julian rubin的解决方案吗？没有，我放弃了宠物项目：P
const editableElements = document.querySelectorAll("[contenteditable]");
const itemLength = editableElements.length;

const createKeyUpEvent = i => () => {
  const selection = document.getSelection();
  const node = selection.anchorNode;
  const text = node.textContent.slice(0, selection.focusOffset).trim();

  // If there is text, do nothing
  if (text) {
    return;
  }

  const previousElement = editableElements[(i - 1) % itemLength];
  previousElement.focus();
};

editableElements.forEach((el, i) => {
  el.addEventListener("keyup", createKeyUpEvent(i));
});