あなたが入力したときにcontentEditable要素をフォーマットします

Question

私は基本的に何か非常に単純なことをしたい：ユーザーにツイートを入力させ、140文字後に灰色になるテキストを切り捨てたい。 は簡単でしょうか？

私は書式設定にcontentEditableプロパティを使用しています。 keyupイベントでは、テキストが長すぎるかどうかを確認し、余分な文字を<span>に移動します。しかし、選択は途中で失われます。

私はすでに多くのことを試しましたが（thisを含む）、何もうまくいかず、あなたは私を助けてくれますか？私はあなたが実際の例を与えることができるなら、それが私を最大限に助けるだろうと思う。

Answer 1

私は興味があったので、これを取った。面倒なほど大量のコードですが、それはまさにそれです。私の新しいバージョンではRangyのsaveSelection（）は使用されていませんが、IE互換のためにクロスブラウザRangeサポートが使用されています。それはここに投稿するにはあまりにも多くのコードですので、私はちょうどjsfiddleにリンクされます：http://jsfiddle.net/timdown/g7KJ5/9/

Answer 2

私はすでにジョーイにメールが、これに外観を与える：

私は新しいアプローチを試みた

https://gist.github.com/746962

Answer 3

$.fn.softlimit = function(maxChars, wrapElement, wrapAttributes) { 
    var lastHTML, that = this[0]; 

    setInterval(function() { 
     //Only trigger on change 
     if (lastHTML == that.innerHTML) return; 
     lastHTML = that.innerHTML; 

     // Save the selection 
     var savedSel = rangy.saveSelection(); 

     // Strip HTML and extract rangy markers 
     var markers = [ ], text = '', htmlPos = 0; 

     function escapeForHTML(text) { 
      return text.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;'); 
     } 

     function processNode(node) { 
      if (node.nodeType == 3) 
       text += escapeForHTML(node.nodeValue); 
      else if (node.nodeName == 'SPAN' && node.id && node.id.indexOf('selectionBoundary_') === 0) 
       markers.push({ index: text.length, html: node.outerHTML }); 
      else 
       for (var i = 0; i < node.childNodes.length; ++i) 
        processNode(node.childNodes[i]); 
     } 

     processNode(that); 

     // Do formatting 
     var getOffset, markerOffset = 0; 

     if (text.length > maxChars) { 
      var startTag = '<' + wrapElement + ' ' + wrapAttributes + '>'; 
      var endTag = '</' + wrapElement + '>'; 

      text = text.substr(0, maxChars) + startTag + text.substr(maxChars) + endTag; 

      getOffset = function(index) { 
       if (index > maxChars) return startTag.length; 
       else return 0; 
      }; 
     } 
     else 
      getOffset = function() { return 0; }; 

     // Re-inject markers 
     for (var i = 0; i < markers.length; ++i) { 
      var marker = markers[i]; 
      var index = marker.index + getOffset(marker.index) + markerOffset; 

      text = text.substr(0, index) + marker.html + text.substr(index); 
      markerOffset += marker.html.length; 
     } 

     that.innerHTML = text; 

     // Restore the original selection 
     rangy.restoreSelection(savedSel); 
    }, 20); 

    return $(this); 
}; 

重要な手がかりだったマーカーとヒント、ため@Timダウンのおかげ：今、これは私が思い付いたものです！