內容編輯的字符計數問題

Question

我有一個內容編輯的股利和我寫了一個自定義函數來獲取字符數是如下：

var charCount = function (elem, event) { 
    var charBox = elem.find('.maxLengthCount'), 
     txtBox = elem.find('textarea'), 
     rte = elem.find('.textareaEditBox'), 
     maxLength = parseInt(txtBox.attr('maxLength')); 

    if(!rte.hasClass('placeholderText')) { 
     /* This is where the remaining characters are being counted */ 

     var remainingChars = maxLength - rte.prop('innerHTML').length; 

     charBox.html(remainingChars); 
     if (remainingChars < 0) { 
      charBox.parent('div').addClass('fntRed'); 
      rte.addClass('borderRed'); 
      txtBox.addClass('error'); 
     } else { 
      charBox.parent('div').removeClass('fntRed'); 
      rte.removeClass('borderRed'); 
      txtBox.removeClass('error'); 
     } 
    } else { 
     charBox.html(maxLength); 
    }   
} 

charCount(wrapper, null); 

editor.on('keyup', function(event) { 
    charCount($(this).closest('.field-wrapper'), event); 
}); 

問題：每次我按<或>的字符數的減少4，每次我按下空格鍵的字符數由6

Answer 1

當你正在編輯的CONTENTEDITABLE元素一些字符獲取他們的HTML轉換的含量減少逃逸：

"<" -> &#60; or &lt; (lesser than) 
">" -> &#62; or &gt; (greater than) 
" " -> &nbsp;  (Non-breaking space) 

您必須將這些字符替換爲原始值才能正確計算文本中的字符數。你爲什麼不使用textarea來達到這個目的？有了內容豐富的元素，你將會遇到更多的麻煩，比如粘貼圖片或鏈接，textareas僅僅用於文本，不會像你的情況那樣逃離角色。

Answer 2

計數的文本字符（或價值假設它是一個textarea元素），而不是在元素的HTML：

var remainingChars = maxLength - rte.val().length;