입력 할 때 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); 
}; 

덕분에 마커와 힌트에 대한 다운 @ 팀에, 그 중요한 단서였다!