带有关键字的Textarea突出显示：奇怪的光标行为

Question

我正在使用Summernote插件创建一个漂亮的textarea和Mark.js插件，以突出显示textarea中定义的关键字（例如foo）。

我有这样的HTML代码：

<div id="text"></div> 

和JavaScript代码：

$('#text').summernote({ 
    height: 150, 
    callbacks: { 
     onChange: function (contents, $editable){ 
     $('.note-editable').unmark({"done": function() { 
      $('.note-editable').mark(
       'foo', 
       {'separateWordSearch': false }) 
     }}) 
     } 
     } 
    } 
); 

JSFiddle

，它的工作好。每当用户在textarea中写入foo时，该单词都被高亮显示，但是我遇到了这个问题：当用户写入foo时，光标移动到foo单词的开头，我不希望这样。我怎样才能解决这个问题？

Answer 1

那是因为您突出显示的文字会变成标记。您必须在该标签的末尾设置光标。如果您有时间，我将在一小时内通过解决方案更新此文章。

Answer 2

可编辑的div不是处理输入的理想类型。类似的游标行为在可编辑div的值正在使用JS或jQuery进行显式更新时很常见。要解决此问题，您需要使用合适的默认输入类型，如<input>和<textarea>标签。

而这并不能解决您的使用案例，因为您无法更改所选文本的属性。因此，解决办法是作为客户端如下：

1. 创建一个全局变量来存储游标的更新值对每个这样的编辑股利。
2. 在每个onblur事件中更新此全局变量的值。
3. 在突出显示关键字之前检索此全局值。
4. 进行必要的关键字高亮后，将光标更新为检索的值。

以下是函数来检索和更新光标值：

function doGetCaretPosition (id, storeTo) { 
    var oField = document.getElementById(id); 
    // Initialize 
    var iCaretPos = -1; 

    // IE Support 
    if (document.selection) { 

    // Set focus on the element 
    oField.focus(); 

    // To get cursor position, get empty selection range 
    var oSel = document.selection.createRange(); 

    // Move selection start to 0 position 
    oSel.moveStart('character', -oField.value.length); 

    // The caret position is selection length 
    iCaretPos = oSel.text.length; 
    } 

    // Firefox support 
    else if (oField.selectionStart || oField.selectionStart == '0') 
    iCaretPos = oField.selectionStart; 

    // Return results 
    if(window[storeTo] !== undefined || window[storeTo] !== '') 
    { 
    //if position is not updated 
    if($(oField).val().length == iCaretPos) 
     window[storeTo] = -1; 
    else  
    window[storeTo] = iCaretPos; 
    console.log("[doGetCaretPosition Updated] "+$(oField).attr('id')+" in : "+window[storeTo]); 
    } 
    else 
    console.log("[doGetCaretPosition : failed]"); 
} 


//Set caret position 
function setCaretPosition(elemId, caretPos) { 
    var elem = document.getElementById(elemId); 

    if(elem != null) { 
     if(elem.createTextRange) { 
      var range = elem.createTextRange(); 
      range.move('character', window[caretPos]); 
      range.select(); 
     } 
     else { 
      if(elem.selectionStart) { 
       elem.focus(); 
       elem.setSelectionRange(window[caretPos], window[caretPos]); 
      } 
      else 
       elem.focus(); 
     } 
    } 
    console.log("[setCaretPosition Updated]"); 
}