Question

这是我用于显示可编辑文本框的html代码，用作＆＃34;备忘录＆＃34;网页内的元素（在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);
  }

但是，当我用大量空格（＆＃34;＆＃34;）填充可编辑div区域时，所需的小于872个字符达到最大限制。有谁知道为什么并有解决方案？感谢。

Answer 1

使用textContent代替innerHTML。

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

innerHTML属性设置或返回元素的HTML内容（内部HTML）。其中包含标签

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

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript contenteditable错误

1 个答案: