Mettre en forme l'élément Elément de contenu au moment de la frappe

Question

Je veux essentiellement faire quelque chose de très simple: je veux que l'utilisateur tape un tweet, et après 140 caractères, je veux que le texte qui sera coupé soit grisé. Si devrait être simple, non? J'utilise la propriété contentEditable pour le formatage. Sur l'événement keyup, je vérifie si le texte est trop long et déplace les caractères supplémentaires dans un <span> si c'est le cas. Cependant, la sélection se perd en chemin.

J'ai déjà essayé beaucoup de choses (y compris this), mais rien n'a fonctionné - pouvez-vous m'aider? Je suppose que cela m'aiderait le plus si vous pouviez donner un exemple concret.

Answer 1

J'ai pris ça parce que j'étais intéressé. C'est énormément de code, mais c'est comme ça. Ma nouvelle version n'utilise pas saveSelection() de Rangy, mais utilise son support de gamme pour la compatibilité IE. Il est trop de code pour poster ici, donc je vais simplement créer un lien vers le jsFiddle: http://jsfiddle.net/timdown/g7KJ5/9/

Answer 2

Je joey déjà envoyé un courriel, mais donner un coup d'oeil ce:

https://gist.github.com/746962

Answer 3

J'ai essayé une nouvelle approche maintenant et ce que je suis venu avec:

$.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); 
}; 

Merci à la baisse @ Tim indice avec les marqueurs, qui était l'indice crucial!