javascript - 在内容可编辑的 div 中模拟光标键(左、右、下、上箭头)？

Question

是否可以在内容可编辑的 div 上模拟箭头键？我试图触发“按键”事件，但似乎 contenteditable 忽略了它们。 (我只需要一个 webkit/safari 解决方案)

我只需要像方向键一样在 div 内移动插入符号，但以编程方式进行。

也许 Tim Down 的 Rangy 库可以提供帮助？

谢谢!

Answer 1

这很棘手，因为一般情况下不可能完全模拟关键事件。具体来说，在大多数浏览器中，如果没有实际击键发生，就不可能触发键事件的默认浏览器操作。

既然如此，就得手动操作，比较复杂。箭头键作用于页面上的可见文本，这意味着您需要考虑折叠空格、隐含的 <br> 换行符等问题和 block 元素，通过 CSS 隐藏的元素 display属性(property)和许多其他微妙之处。此外，模拟向上和向下箭头键依赖于获取页面上任意字符的精确像素坐标，这在大多数浏览器中都非常重要。

我正在研究一种在 Rangy 中浏览页面上可见文本的方法，这将有助于模拟左右箭头键，但 Rangy 无法模拟上下箭头键。