可输入的div怎么限制输入的字数

Question

<div contenteditable="true"></div>

可输入的div怎么限制输入的字个数

Answer 1

<div contenteditable="true">1</div>

$ele.onkeyup = function(){
  var _html = this.innerHTML;
  if(_html.length > 10){
    this.innerHTML = _html.substr(0,10);
    this.blur();
  }
}

Answer 2

设置innerHTML.length=“字符个数”

Answer 3

通过js来限制，参考： http://stackoverflow.com/ques...

Answer 4

  <div id="test" contenteditable="true"></div>
  <script type="text/javascript">
    document.querySelector('#test').addEventListener('keypress',function(e) {
      if(this.innerText.length>=10) {
        e.preventDefault();
      }
    });
  </script>

Answer 5

<div id="test" contenteditable="true" tabIndex="-1"></div>
$('#test').on('compositionstart', function() {
        flag = false;
    });
    $('#test').on('compositionend', function() {
        flag = true;
    });
    $('#test').on('input', function() {
      setTimeout(function() {
        if (flag) {
          if($('#test').text().length>= 120) {
            setTimeout(() => {
              $('#test').text($('#test').text().substring(0, 120));
              var range = window.getSelection(); //创建range
              range.selectAllChildren(document.getElementById('test')); //range 选择obj下所有子内容
              range.collapseToEnd();
              $("#sy").text($('#test').text().length)
            }, 0);
          } else {
            $("#sy").text($('#test').text().length)
          }
          
        }
      }, 0);
    });