JavaScript可满足的错误

Question

这是我用于显示可编辑文本框的HTML代码，并用作网页中的"备忘录"元素(在DIV标签内(。

contenteditable="true" name="choice1" class="textfield" max="872">Enter your Memo Here!

CSS：

    .textfield {
  max-width: 800px;
  width: 800px;
  border: 1px solid black;
  padding: 8px;
  margin: 20px;
  float:right;
  position: relative;
}

javaScript：

  var textfields = document.getElementsByClassName("textfield");
  for(i=0; i<textfields.length; i++){
      textfields[i].addEventListener("keypress", function(e) {
          if(this.innerHTML.length >= this.getAttribute("max")){
              e.preventDefault();
              return false;
          }
      }, false);
  }

但是，当我用大量空间("(填充可编辑的DIV区域时，要达到最大限制所需的872个字符。有人知道为什么并有解决方案吗？谢谢。

Answer 1

使用textContent代替innerHTML。

TextContent属性设置或返回指定节点的文本内容及其所有后代。

InnerHTML属性集或返回元素的HTML内容(Inner HTML(。哪个将包括标签

在下面的示例中，我将最大设置为20

var textfields = document.getElementsByClassName("textfield");
for (i = 0; i < textfields.length; i++) {
  textfields[i].addEventListener("keypress", function(e) {
    if (this.textContent.length >= this.getAttribute("max")) {
      e.preventDefault();
      console.log('max reached') ;
      return false;
    }
  }, false);
}

<div contenteditable="true" name="choice1" class="textfield" max="20">Enter your Memo Here!</div>