多个contenteditable元素，使用箭头键导航

Question

我在页面上有多个<p contenteditable="true"></p>元素。我正在寻找一种解决方案，使用箭头键来浏览那些不相交的元素，就好像它们是一个可编辑元素一样。

因此，例如，如果插入符号位于第1段最后一行的第10个字符处且用户按下向下箭头键，则插入符号应跳至第2段并将插入符号放在第10个字符处（如果它的第一行就是一个。

感谢任何评论。

Answer 1

修订回答

您可以使用类似下面的内容检测插入符号位于当前可编辑元素的开头或结尾处（示例是最后一行的向下数组）：

• 检测向下箭头keydown事件
• 通过执行以下操作之一，检查插入符号是否在段落末尾：
• 从选择对象创建Range（或IE中的TextRange，并将其与包含整个段落的另一个Range进行比较。这是一个稍微复杂但更无缝的选择。 或
• 存储选择并设置一个简短的计时器（比如1毫秒）以使按键生效。传递给定时器调用的函数将当前选择与先前存储的选择进行比较。如果它们是相同的，则插入符号没有移动，必须在段落的末尾。
• 如果插入符号位于paragraoph的末尾，请将其移至下一个可编辑段落的开头。

这不是插入符号的通常行为，但相当容易实现，可能是一个合理的妥协。问题在于没有可靠的跨浏览器方法来计算插入符号的坐标。

Answer 2

如果要使容器元素可编辑而不是每个段落，该怎么办？ 例如：

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