ContentEditable div，光標位置不能正常工作

Question

在JSFiddle中寫入文本時，光標位置移動到句子的最後一個位置。

var changed, 
 
    lastValue = '', 
 
    div = $('#ce'), 
 
    words = ['oele', 'geel', 'politie', 'foo bar']; 
 

 
function markWords() { 
 
    var html = div.html().replace(/<\/?strong>/gi, ''), 
 
    text = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' '), 
 
    exp; 
 
    $.each(words, function(i, word) { 
 
    exp = new RegExp('\\b(' + word + ')\\b', 'gi'); 
 
    html = html.replace(exp, function(m) { 
 
     console.log('WORD MATCH:', m); 
 
     return '<strong>' + m + '</strong>'; 
 
    }); 
 
    }); 
 
    //html = html.replace('&nbsp;', ' ').replace(/\s+/g, ' '); 
 
    console.log('HTML:', html); 
 
    console.log('----'); 
 
    div.html(html); 
 
} 
 

 
setInterval(function() { 
 
    var html = div.html(); 
 
    if (lastValue != html && html) { 
 
    //console.log(lastValue); 
 
    //console.log(html); 
 
    //console.log('----'); 
 
    lastValue = html; 
 
    markWords(); 
 
    setEndOfContenteditable(div[0]); 
 
    } 
 
}, 500); 
 

 
function setEndOfContenteditable(contentEditableElement) { 
 
    var range, selection; 
 
    if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+ 
 
    { 
 
    range = document.createRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    selection = window.getSelection(); //get the selection object (allows you to change selection) 
 
    selection.removeAllRanges(); //remove any selections already made 
 
    selection.addRange(range); //make the range you have just created the visible selection 
 
    } else if (document.selection) //IE 8 and lower 
 
    { 
 
    range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    range.select(); //Select the range (make it the visible selection 
 
    } 
 
}

[contenteditable] { 
 
    padding: 10px; 
 
    border: dotted 1px #aaa; 
 
} 
 

 
[contenteditable]>div { 
 
    margin: 10px 0; 
 
} 
 

 
[contenteditable] strong { 
 
    font-weight: normal; 
 
    background: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="ce" contenteditable>I love me some foo bar and shit.</div> 
 

 
<p><a href="javascript:void(0);" onclick="$('#ce').html('');">clear</a></p>

我還創建了一個展示的jsfiddle這here。

Answer 1

更改setInterval函數後，像下面它爲我工作。

setInterval(function() { 
    var html = div.html(); 
    if (lastValue != html && html) { 
     lastValue = html; 
    } 
}, 500);