Обнаружение стрелки вверх на первой строке

Question

Допустим, мы работаем над двумя элементами 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>

Header и LoremIpsum - это два разных contenteditable элемента div. LoremIpsum не содержит разрывов строк. overflow-wrap: break-word; используется для разрыва строки выше.

Когда я нажимаю стрелку вверх на rhoncus слово хочет идти на одну строку вверх, и это поведение по умолчанию contenteditable. Однако, когда я нажимаю стрелку на amet слове, я хочу сфокусировать заголовок div.

Есть ли какой-нибудь способ обнаружить эти две ситуации и обработать их по-разному?

Справатеперь я перехожу к другому div только тогда, когда:

evt.keyCode === Key.arrowUp && window.getSelection().anchorOffset === 0

, но для этого требуется дополнительный щелчок стрелки на первой строке, чтобы курсор переместился в начало строки перед фокусировкой на другом div.

Answer 1

Один из способов сделать это - проверить значение текущего textContent в точке курсора, после события a keyup.

Когда вы 'снова вверх , это будет пустая строка (после правильной обрезки), и на этой основе вы можете поместить фокус на предыдущий элемент contenteditable.

Пример: https://codesandbox.io/s/objective-gates-m0ntw

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));
});