更改可信的div文本时如何保留插入位置？

Question

我正在尝试制作一个文本编辑器，根据它的内容格式化文本。 例如，当您键入“select”时，它会将单词“select”的颜色更改为红色。 我正在使用一个contenteditable div 。

我能够改变颜色，但每次更改文本时，插入符号（光标）都会移动到div的开头。

这是我的例子：

 var replace = function(text, q, r){ text=text.split(q); var result = text[0]; for(var i = 1; i < text.length; i++){ result += r + text[i]; } return result; }; var run = function(){ document.getElementById('code_editor').innerHTML = replace(document.getElementById('code_editor').textContent, "select", "<span class='start'>select</span>"); } $('#code_editor').keyup(function (event) { run(); }); 

 #code_editor { width: 600px; height: 100px; box-shadow: inset 0px 0px 2px black; padding: 5px; overflow-y: scroll; } .start { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <code><div id="code_editor" contenteditable tabindex="1"></div></code> 

http://jsfiddle.net/wgw8ssL6/

Answer 1

我不确定你是否需要答案，但无论如何我都会回答。 因此，方法是在更新div的文本后更新插入位置。

 var replace = function(text, q, r){ text=text.split(q); var result = text[0]; for(var i = 1; i < text.length; i++){ result += r + text[i]; } return result; }; var run = function(){ document.getElementById('code_editor').innerHTML = replace(document.getElementById('code_editor').textContent, "select", "<span class='start'>select</span>"); placeCaretAtEnd(document.getElementById('code_editor')); //Function invoke } /*Function to place caret at end*/ function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } console.log("[placeCaretAtEnd updated]"); } $('#code_editor').keyup(function (event) { run(); }); 

 #code_editor { width: 600px; height: 100px; box-shadow: inset 0px 0px 2px black; padding: 5px; overflow-y: scroll; } .start { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <code><div id="code_editor" contenteditable tabindex="1"></div></code> 

功能的功劳