在JS小提琴中contenteditable
div的句子之间进行书写时,光标位置会转到句子的末尾。
答案 0 :(得分:0)
使用键,而不是计时器事件。按键后我用了等待树秒。您可以更改它以增加或减少延迟。
<script>
var changed, timer,
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(' ', ' ').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);
$("#ce").on('keyup', function() {
clearTimeout(timer); //clear any running timeout on key up
timer = setTimeout(function() { //then give it a second to see if the user is finished
//do
var html = div.html();
if ( lastValue !== html && html ) {
// console.log(lastValue);
// console.log(html);
//console.log('----');
lastValue = html;
markWords();
setEndOfContenteditable(div[0]);
}
}, 3000);
});
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
}
}
markWords();
setEndOfContenteditable(div[0]);
</script>