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

标签 javascript contenteditable caret rangy

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

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

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

谢谢!

最佳答案

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

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

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

关于javascript - 在内容可编辑的 div 中模拟光标键(左、右、下、上箭头)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10077106/

相关文章:

javascript - 为什么我的 Angular Directive(指令)没有引入这个属性?

javascript - 如何将随机生成的数字放入表格中?

javascript - 使用 insertHTML 的 execCommand 的 iframe 撤消/重做(contenteditable)

html - 为什么插入符号在某些网站上显得更粗?

javascript - 在tinyMCE问题中单击自定义按钮后保留选择

javascript - 如何将值传递给此 react 组件

javascript - 用于JavaScript的HTML净化器

javascript - document.execCommand 未执行

Silverlight TextBox,移动插入符号位置

Javascript 流联合类型缺少 redux 操作的属性