javascript - ContentEditable div 在 JS fiddle 中无法正常工作

Question

在 JS fiddle 的 contenteditable div 的句子之间书写时，光标位置会移动到句子的末尾。

JSFiddle

Answer 1

使用向上键代替计时器事件。我在按键后使用了等待树秒。您可以更改它以增加或减少延迟。

            <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('&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);



        $("#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>