ContentEditable div-前"x"个字符后的所有HTML [英] ContentEditable div - all HTML after the first 'x' characters

问题描述

我一直在研究可识别的div，当它超出定义的最大长度时，我会突出显示文本.

I've been working on a condenteditable div, whereby I highlight text when it goes over a defined maximum length.

此处的Codepen: http://codepen.io/doublesidestickytape/pen/NqBMXR

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

工作正常-除非用户按回车键-否则它将中断！

It works out OK - unless a user press Return - then it breaks!

我在想我可以在第一个[x]个字符之后获取所有HTML内容，然后遍历每个元素(用作新行)-在我的代码中包装一个高亮类隐藏的div.

I'm thinking that I could could get all the HTML content after the first [x] amount of characters, then loop through each of the elements (which act as new lines) - to wrap a highlight class around them in my hidden div.

我不确定如何实现这一目标.

I'm not sure how to achieve this though.

HTML

<div class="wrapper">
  <div contenteditable="true" data-maxlength="10" class="editable"></div>
  <div contenteditable="true" class="readonly"></div>
</div>

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 = "<span class='highlight'>" + over + "</span>";
      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 = "<span class='highlight'>" + over + "</span>";
      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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrapper">
  <div contenteditable="true" data-maxlength="10" class="editable"></div>
  <div contenteditable="true" class="readonly"></div>
</div>

推荐答案

我已经解决了一个问题，请参见: http://jsfiddle.net/alan0xd7/6o1sr5fg/

I have worked out a solution, see: http://jsfiddle.net/alan0xd7/6o1sr5fg/

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

• If there are text that needs highlighting, first we just copy over the content HTML to div.readonly for further processing. If no highlighting is required, we just empty the div.

collectTextNodes()函数遍历内容HTML中的所有DOM节点，并收集所有文本节点.收集的节点将仅包含文本，而没有子节点.

The collectTextNodes() function iterates through all the DOM nodes in the content HTML, and collects all text nodes. The collected nodes would only contain text, and no child nodes.

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

For all the text nodes we collected, we run them through the highlight() function to highlight the text.

highlight()的工作方式是先跳过maximumLength个字符，然后将所有内容包装在<span class='highlight'>中.

highlight() works by first skipping maximumLength number of characters, then wrap everything in <span class='highlight'>.

这篇关于ContentEditable div-前"x"个字符后的所有HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！