修改contenteditable后恢复光标位置 [英] Restore cursor position after changing contenteditable
本文介绍了修改contenteditable后恢复光标位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div contenteditable =trueclass =value research-form thumbnail >
这里有些文字
< / div>
div的内容应该动态地突出显示某些单词，而用户类型则会像这样：
< div contenteditable =trueclass =value research-form thumbnail>
这里有一些文字< span style =background-color：yellow>突出显示< / div>它
< / div>
< script> （'input'，function（event）{
var newText = input。
$（document）.ready（function（）{
var input = $（'＃textarea'）。 text（）。replace（'highlight'，'< span style =background-color：yellow> highlight< / div>'）;
input.html（$。parseHTML（newText））;
}）;
}）;
< / script>
但是有一个问题：当我在div中刷新文本时光标在输入文本开始时移动。
在改变contenteditable的值之后，有什么办法恢复光标位置吗？或者也许有其他方法可以得到相同的效果？
解决方案
我找到了解决方案。
以下是完整的代码：
< div class =containerstyle =margin- top：10px>
< div class =thumbnail valuecontenteditable =true>
< / div>
< / div>
< script>
$（document）.ready（function（）{
function getCaretCharacterOffsetWithin（element）{
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if（typeof win.getSelection！=undefined）{
sel = win.getSelection（ ）;
if（sel.rangeCount> 0）{
var range = win.getSelection（）。getRangeAt（0）;
var preCaretRange = range.cloneRange（）;
preCaretRange.selectNodeContents（element）;
preCaretRange.setEnd（range.endContainer，range.endOffset）;
caretOffset = preCaretRange.toString（）。length;
}
} else （（sel = doc.selection）&& sel.type！=Control）{
var textRange = sel.createRange（）;
var preCaretTextRange = doc.body.createTextRange（）;
preCaretTextRange.moveToElementText（element）;
preCaretTextRange.setEndPoint（EndToEnd，textRange）;
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
函数setCaretPosition（element，offset）{
var range = document.createRange（）;
var sel = window.getSelection（）;
//选择合适的节点
var currentNode = null;
var previousNode = null;
for（var i = 0; i< element.childNodes.length; i ++）{
// save previous node
previousNode = currentNode;
//获取当前节点
currentNode = element.childNodes [i];
//如果我们得到跨度或其他东西，那么我们应该得到子节点
while（currentNode.childNodes.length> 0）{
currentNode = currentNode.childNodes [0];
}
//当前节点的计算偏移量
if（previousNode！= null）{
offset - = previousNode.length;
}
//检查当前节点是否有足够的长度
if（offset< = currentNode.length）{
break;
}
}
//将脱字号移动到指定的偏移量
if（currentNode！= null）{
range.setStart（currentNode，offset）;
range.collapse（true）;
sel.removeAllRanges（）;
sel.addRange（range）;
函数onInput（event）{
var position = getCaretCharacterOffsetWithin（input.get（0））;
var text = input.text（）;
text = text.replace（new RegExp（'\\btest\\''，'ig'），'< span style =background-color：yellow>测试< / span> ;'）;
input.html（$。parseHTML（text））;
setCaretPosition（input.get（0），position）; （'input'，onInput）;
var input = $（'。value'）。
//应该手动更新内容以防止空格
input.html（'简单输入测试示例'）;
//触发事件
onInput（）;
}）;
< / script>
There is html like this:
<div contenteditable="true" class="value research-form thumbnail">
Some text here
</div>
And content of div should dynamicly highlight some words while user types e.g make something like:
<div contenteditable="true" class="value research-form thumbnail">
Some text here <span style="background-color: yellow">highlight</div> it
</div>
<script>
$(document).ready(function () {
var input = $('#textarea').on('input', function (event) {
var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
input.html($.parseHTML(newText));
});
});
</script>
But there is a problem: when I refresh text in div cursor moves at start of the text in input.
Is there any ways to restore cursor position after changing contenteditable value? Or maybe there is other way to get the same effect?
解决方案
I found the solution.
Here is a complete code:
<div class="container" style="margin-top: 10px">
<div class="thumbnail value" contenteditable="true">
</div>
</div>
<script>
$(document).ready(function () {
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ((sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
function setCaretPosition(element, offset) {
var range = document.createRange();
var sel = window.getSelection();
//select appropriate node
var currentNode = null;
var previousNode = null;
for (var i = 0; i < element.childNodes.length; i++) {
//save previous node
previousNode = currentNode;
//get current node
currentNode = element.childNodes[i];
//if we get span or something else then we should get child node
while(currentNode.childNodes.length > 0){
currentNode = currentNode.childNodes[0];
}
//calc offset in current node
if (previousNode != null) {
offset -= previousNode.length;
}
//check whether current node has enough length
if (offset <= currentNode.length) {
break;
}
}
//move caret to specified offset
if (currentNode != null) {
range.setStart(currentNode, offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
function onInput(event) {
var position = getCaretCharacterOffsetWithin(input.get(0));
var text = input.text();
text = text.replace(new RegExp('\\btest\\b', 'ig'), '<span style="background-color: yellow">test</span>');
input.html($.parseHTML(text));
setCaretPosition(input.get(0), position);
}
var input = $('.value').on('input',onInput);
//content should be updated manually to prevent aditional spaces
input.html('simple input test example');
//trigger event
onInput();
});
</script>
这篇关于修改contenteditable后恢复光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
