contenteditable =“true”：创建突出显示输入形式的语法

Question

我正在摆弄contenteditable =“true”来创建一个突出显示语法的输入框。我正在编写一个jquery插件，可将<input>标记转换为<div contenteditable="true">容器。详细地，它隐藏了<input>并在其后插入<div>容器。

在我的小提琴中，高亮功能只是一个简单的替换功能，以突出显示容器中的所有'AND'。这是我的小提琴：

http://jsfiddle.net/3Rhz8/2/

如果更改了容器的内容，则插件必须

• 将内容与输入内容同步
• 更新语法高亮显示

在我的例子中，我只是在听keyup事件。现在，当我想更新容器的语法高亮时，会出现问题。当通过.html()或容器的innerHTML属性更改输入时，光标状态将重置。有没有办法防止这种情况，还是可以保存/恢复光标位置？

Answer 1

有一个完美的API可用于保存和恢复光标位置： http://code.google.com/p/rangy/

这是一个笨拙的API。 你所要做的就是

var savedSel = rangy.saveSelection();

保存光标位置然后

rangy.restoreSelection(savedSel);

恢复光标位置。您可以在此处详细了解：http://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule