contenteditable输入框怎么限制字数长度？

Question

http://js.jirengu.com/gigasozufi/8/edit

我写了个简单demo，试过substr，发现不行，字符串是错乱的，还是可以输入，而且会被覆盖。

请教一下怎么解决这个问题，限制最大输入字数呢？

Answer 1

只需要监听keydown事件就行了。如果event.target.innerText.length 大于目标数阻止默认行为即可

element.addEventListener('keydown',e=>{
    if(e.target.innerText.length > 10){
        e.preventDefault();
    }
})

Answer 2

判断字符串长度，让元素失去焦点就可以了。
注意监听keyup事件，当用户输入中文时，避免长度超出从而截取10个字符。（keydown事件在使用输入法按空格输入文字后，不能获得正确的长度。chrome浏览器测试）

document.querySelector(".edit").addEventListener("keyup", function(e){
      console.log(this, this.innerText.length,this.innerText.substr(0,10))
      if(this.innerText.length > 10) {
        this.innerText =  this.innerText.substr(0, 9);
        this.blur()
      }
    })