contenteditable =「true」：創建語法突出顯示的輸入表單

Question

我目前擺弄contenteditable =「true」來創建突出顯示語法的輸入框。我正在寫一個jQuery插件，將<input>標籤轉換爲<div contenteditable="true">容器。詳細地說，它隱藏了<input>並在其後插入了<div>容器。

在我的小提琴中，高亮功能只是一個簡單的替換功能，用於突出顯示容器中的所有'AND'。這裏是我的小提琴：如果容器的內容被改變

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

，該插件必須

• 同步與輸入
• 更新語法高亮
內容的內容

在我的例子中，我只是在聽基調事件。現在，當我想更新容器的語法高亮顯示時出現問題。當通過.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