несколько элементов контента, используя клавиши со стрелками для навигации

Question

Я получил несколько <p contenteditable="true"></p> элементов на странице. Я ищу решение использовать клавиши со стрелками для навигации по этим непересекающимся элементам, как если бы они были одним единственным редактируемым элементом.

Так, например, если каретка находится на 10-м символе в последней строке 1-го абзаца, и пользователь нажимает клавишу со стрелкой вниз, карет должен перейти к второму абзацу и поместить каретку на 10-й символ (если есть) на первой строке.

Цените любые комментарии.

Answer 1

Что делать, если вы сделаете элемент контейнера редактируемым, а не каждый отдельный абзац? Например:

<div contenteditable="true"> 
    <p>Lorem ipsum</p> 
    <p>dolor sit</p> 
</div> 

Answer 2

Пересмотренный ответ

Вы можете обнаружить, что каретка находится в начале или в конце текущего редактируемого элемента, используя что-то вроде следующего (например, для вниз матрицы на последняя строка):

• обнаружить стрелку вниз keydown событие
• Проверьте, если курсор находится в конце фасова ragraph, выполнив одно из следующих действий:
• Создайте Range (или TextRange в IE) из объекта выбора и сравнив его с другим диапазоном, который охватывает весь абзац. Это немного сложнее, но более плавный вариант. OR:
• Сохраните выбор и установите короткий таймер (скажем, 1 миллисекунду), чтобы позволить нажатию клавиши вступить в силу. Функция, переданная на вызовы таймера, сравнивает текущий выбор с ранее сохраненным выбором. Если они одинаковы, карет не двигался и, должно быть, находился в конце абзаца.
• Если каретка находится в конце параграфа, переместите его в начало следующего редактируемого абзаца.

Это не обычное поведение каретки, но достаточно легко достичь и может быть разумным компромиссом. Проблема в том, что нет надежного кросс-браузерного способа разработки координат каретки.