ContentEditable div – tout le HTML après les premiers «x» caractères

Je travaille sur une div par consentante, dans laquelle je mets en surbrillance le texte quand il dépasse une longueur maximale définie.

Codepen ici: http://codepen.io/doublesidedstickytape/pen/NqBMXR

Cela fonctionne bien – à moins qu’un utilisateur n’appuie sur Entrée – alors ça casse!

Je pense que je pourrais obtenir tout le contenu HTML après le premier [x] nombre de caractères, puis parcourir chacun des éléments (qui constituent de nouvelles lignes) – pour envelopper une classe de surbrillance autour d’eux dans mon div caché.

• Comment placer le curseur à la fin du texte après avoir remplacé HTML par jQuery?
• contenteditable sur le double clic
• Récupère la position du curseur dans une div contenteditable
• Évitez la fonction createElement si elle se trouve dans un élément (contentEditable)
• Ne perdez pas le focus lorsque vous cliquez sur un autre élément

Je ne sais pas comment y parvenir.

HTML

JS

 $(document).on("keyup", "div.editable", function(event) { // GOOD TO STORE THIS IN A VAR // PREVENTS THE BROWSER HAVING TO // FIGURE OUT WHAT $(this) IS // EACH TIME YOU CALL IT var element = $(this); // KEYUP if (event.type == "keyup") { var maximumLength = element.attr("data-maxlength"); var currentLength = element.text().length; var content = element.text(); // CURRENT LENGTH IS GREATER THAN // THE SPECIFIED MAXIMUM LENGTH if (currentLength > maximumLength) { var over = element.html().substr(maximumLength); over = "" + over + ""; content = element.html().substr(0, maximumLength) + over; } $("div.readonly").html(content); } }); 

CSS

 body { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.4em; color: #444; } div.wrapper { position: relative; margin-top: 15px; } div.editable, div.readonly { width: 300px; white-space: wrap; position: absolute; top: 0; left: 0; } div.editable { border-bottom: 1px solid #00aeed; outline: none; } div.readonly { z-index: -99; color: transparent; background: transparent; } span.highlight { background: #fcc !important; } 

 $(document).on("keyup", "div.editable", function(event) { // GOOD TO STORE THIS IN A VAR // PREVENTS THE BROWSER HAVING TO // FIGURE OUT WHAT $(this) IS // EACH TIME YOU CALL IT var element = $(this); // KEYUP if (event.type == "keyup") { var maximumLength = element.attr("data-maxlength"); var currentLength = element.text().length; var content = element.text(); // CURRENT LENGTH IS GREATER THAN // THE SPECIFIED MAXIMUM LENGTH if (currentLength > maximumLength) { var over = element.html().substr(maximumLength); over = "" + over + ""; content = element.html().substr(0, maximumLength) + over; } $("div.readonly").html(content); } }); 

 body { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.4em; color: #444; } div.wrapper { position: relative; margin-top: 15px; } div.editable, div.readonly { width: 300px; white-space: wrap; position: absolute; top: 0; left: 0; } div.editable { border-bottom: 1px solid #00aeed; outline: none; } div.readonly { z-index: -99; color: transparent; background: transparent; } span.highlight { background: #fcc !important; } 

• selectionStart et selectionEnd dans l’élément contenteditable
• Contenu HTML5Editable avec jQuery
• Comment obtenir le décalage de pixel par rapport à la position actuelle du curseur dans une iframe avec contentEditable
• Insérer du code HTML lorsque le curseur se trouvait dans un contenu modifiable
• contenteditable met le curseur hors de la plage insérée