ContentEditable Div funktioniert nicht ordnungsgemäß in JS Geige

Question

Beim Schreiben zwischen dem Satz der contenteditable div in JS Geige, Cursor Position ist Ende des Satzes.

JSFiddle

Answer 1

Statt Timer-Ereignis, verwenden Sie die Taste nach oben. Ich habe nach dem Hochtasten auf Baumsekunden gewartet. Sie können es ändern, um die Verzögerung zu erhöhen oder zu verringern.

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