contenteditable=“true”：创建语法突出显示的输入表单
我目前正在摆弄 contenteditable="true" 来创建一个语法突出显示的输入框。我正在编写一个 jquery 插件，它将 标签转换为
在我的小提琴中，突出显示功能只是一个简单的替换功能，用于突出显示容器中的所有“AND”。这是我的小提琴：
如果容器的内容更改后，插件必须将
- 内容与输入的内容同步
- 更新语法突出显示
在我的示例中，我只是在监听 keyup 事件。现在，当我想更新容器的语法突出显示时出现问题。当通过 .html() 或容器的 innerHTML 属性更改输入时，光标状态将重置。有没有办法防止这种情况，或者我可以保存/恢复光标位置吗？
I'm currently fiddling around with contenteditable="true" to create a syntax highlighted input box. I'm writing a jquery plugin that converts a <input> tag to a <div contenteditable="true"> container. In detail, it hides the <input> and inserts the <div> container after it.
In my fiddle, the highlight function is just a simple replace function to highlight all 'AND's in the container. Here's my fiddle:
If the content of the container is changed, the plugin has to
- sync the content with the content of the input
- update the syntax highlighting
In my example, I'm just listening to the keyup event. Now, there's a problem when I want to update the syntax highlighting of the container. When the input is changed via .html() or the container's innerHTML property, the cursor state resets. Is there a way to prevent this, or can I save/restore the cursor position ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有一个完美的API用于保存和恢复光标位置：
http://code.google.com/p/rangy/
这是 rangy API。
您所要做的就是
保存光标位置，然后
恢复光标位置。您可以在此处阅读有关此内容的更多信息：http://code.google.com/p/rangy /wiki/SelectionSaveRestoreModule
There is a perfect API for saving and restoring the cursor position:
http://code.google.com/p/rangy/
It's the rangy API.
All you have to do is
to save the cursor position and then
to restore the cursor position. You can read more about this here: http://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule