Javascript内容可编辑错误

这是用于显示可编辑文本框的html代码，用作网页（div标记内）中的“memo”元素

CSS:

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

var textfields=document.getElementsByClassName（“textfield”）；
对于（i=0；i=this.getAttribute（“max”））{
e、 预防默认值（）；
返回false；
}
}，假）；
}

---

但是，当我用大量空格（“”）填充可编辑div区域时，达到最大限制所需的字符数少于声明的872个。有人知道原因并有解决办法吗？谢谢。

使用

textContent

而不是

innerHTML

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

innerHTML属性设置或返回元素的HTML内容（内部HTML）。该内容将包括标记

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

20

var textfields=document.getElementsByClassName（“textfield”）；
对于（i=0；i=this.getAttribute（“max”））{
e、 预防默认值（）；
console.log（“达到最大值”）；
返回false；
}
}，假）；
}

---

在这里输入您的备忘录

您能创建一个工作的JSFIDLE吗？仅供参考，

name

属性仅用于表单元素。出于CSS和JavaScript的目的，请使用

id

属性。将相同的事件处理程序添加到

keyup

事件以及

keypress

事件中，以正确跟踪所有字符。我猜连续空格的方式（在呈现HTML时不会显示这些空格）存储在contenteditable div is等中，因为innerHTML的长度每秒钟跳5个空格。不管怎样，那只是有趣的一部分。您真正的问题是，您使用div.innerHTML.length而不是div.textContent.length只是为了弄清楚

innerHTML

要求HTML解析器将内容视为HTML（以对其进行解析）。这样做会去除（标准化）额外的空白。

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

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