Javascript:如何用箭头键控制模拟光标来定位 DOM 编辑?

发布于 2024-08-24 23:27:35 字数 292 浏览 9 评论 0原文

我正在使用 Javascript 构建一个浏览器内 IDE。代码/小部件存储在文档中。我想要控制编辑过程,因此我拦截击键并在 DOM 中的编辑点处显示模拟光标。 (起初我尝试使用 contenteditable = true 但这并没有给我足够的控制权。)

我已经取得了一些进展,因此单击将在 div 的开头插入光标,并且右箭头将移动到下一个节点,虽然现在我意识到我必须深入研究内容()并跟踪文本节点中的光标位置..

我想知道是否有人知道我可以参考或复制的任何代码或其他东西,而不是重新发明轮子。我正在使用 jQuery,但这不是必需的。

I'm building an in-browser IDE using Javascript. The code/widgets are stored in the document. I want control over the editing process so I am intercepting keystrokes and displaying a simulated cursor where the edit point is in the DOM. (At first I tried using contenteditable = true but that isn't giving me enough control.)

I've made some progress so that clicking will insert the cursor at the beginning of the div and the right arrow will move to the next node, although now I am realizing that I am going to have to dig into the contents() and keep track of my cursor position in text nodes..

I'm wondering if anyone knows of any code out there that I can refer to or just copy or something rather than re-inventing the wheel. I am using jQuery but that isn't a requirement.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

彡翼 2024-08-31 23:27:35

也许 Mozilla Bespin 可以提供帮助。但恕我直言,如果您不能使用 contenteditable,您将需要编写大量代码。

Perhaps Mozilla Bespin can help. But IMHO if you can't use contenteditable you'll need to write a lot of code.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文