3

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

例如，如果插入符号位于第 1 段最后一行的第 10 个字符并且用户按下向下箭头键，则插入符号应该跳转到第 2 段并将插入符号放在第 10 个字符（如果有的话）在它的第一行。

感谢任何评论。

4

2 回答 2

2

修改后的答案

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

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

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

于 2010-06-03T10:54:05.377 回答
0

如果您让容器元素而不是每个段落都可编辑怎么办？例如：

<div contenteditable="true">
    <p>Lorem ipsum</p>
    <p>dolor sit</p>
</div>
于 2010-06-03T10:53:27.857 回答