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

Question

在JSFiddle中，当在文本之间写入时，光标位置移动到句子的最后位置。

＆＃13;

＆＃13;

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
  }
}

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我还创建了一个展示此here的JSFiddle。

Answer 1

在更改setInterval函数之后，它对我有用。

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