帶有關鍵字的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]"); 
}