ContentEditable div – 第一个’x’字符后面的所有HTML

我一直在研究一个可聚合的div，当我超过定义的最大长度时，我会突出显示文本。

Codepen在这里： http ：//codepen.io/doublesidedstickytape/pen/NqBMXR

它运行正常 – 除非用户按Return键 – 然后它会中断！

我想我可以在第一个[x]数量的字符之后获得所有HTML内容，然后循环遍历每个元素（充当新行） – 在我隐藏的div中包围一个高亮类。

我不知道如何实现这个目标。

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; } 

Answer 1

我已经找到了解决方案，请参阅： http ： //jsfiddle.net/alan0xd7/6o1sr5fg/

• 如果有需要突出显示的文本，首先我们只需将内容HTML复制到div.readonly进行进一步处理。 如果不需要突出显示，我们只需清空div 。

• collectTextNodes()函数遍历内容HTML中的所有DOM节点，并收集所有文本节点。 收集的节点只包含文本，没有子节点。

• 对于我们收集的所有文本节点，我们通过highlight()函数运行它们以突出显示文本。

• highlight()工作原理是首先跳过maximumLength个字符，然后将所有内容包装在 。