ContentEditable div - 前 'x' 个字符后的所有 HTML

Question

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

代码笔在这里： http://codepen.io/doublesidedstickytape/pen/NqBMXR

运行正常 - 除非用户按下 Return - 然后它就会崩溃！

我想我可以在前 [x] 个字符后获取所有 HTML 内容，然后遍历每个元素（充当新行）- 换行在我隐藏的 div.

中突出显示他们周围的 class

不过我不确定如何实现。

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>

Answer 1

我已经想出办法了，见：http://jsfiddle.net/alan0xd7/6o1sr5fg/

如果有文字需要高亮显示，我们先把HTML的内容复制到div.readonly做进一步处理。如果不需要突出显示，我们只需清空 div.
collectTextNodes()函数遍历内容HTML中的所有DOM节点，收集所有文本节点。收集的节点将只包含文本，没有子节点。
对于我们收集到的所有文本节点，我们运行通过highlight()函数对它们进行高亮显示。
highlight() 首先跳过 maximumLength 个字符，然后将所有内容包装在 <span class='highlight'>.

ContentEditable div - 前 'x' 个字符后的所有 HTML

ContentEditable div - all HTML after the first 'x' characters

jquery

contenteditable