contenteditable＝“;true”:创建语法高亮显示的输入表单

contenteditable="true": creating a syntax highlighted input form

本文关键字：高亮 语法 显示 表单 输入 创建 true contenteditable      更新时间：2023-09-26

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

在我看来，高亮显示函数只是一个简单的替换函数，用来高亮显示容器中的所有AND。这是我的小提琴：

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

如果容器的内容发生了更改，则插件必须进行

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

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

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

它是细长的API。你所要做的就是

var savedSel = rangy.saveSelection();

保存光标位置，然后保存

rangy.restoreSelection(savedSel);

以恢复光标位置。您可以在此处阅读更多信息：http://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule

相关文章：