javascript - 具有最大长度和 jquery 的 Contenteditable div

Question

有以下任务 - 我需要防止在使用原生 JS/JQuery 的 contenteditable div 中输入超过 N 个符号，即用户输入 10 个符号并且不能输入更多，只能清除。

<div contenteditable="true" placeholder="Текст сообщения" class="editable ng-valid ng-valid-maxlength ng-dirty ng-valid-parse ng-touched"></div>

Answer 1

这应该对你有用 fiddle 是here

$('#editcontent').on('keydown', function(event) {
  $('span').text('Characters entered:' + $(this).text().length);
  if ($(this).text().length === 10 && event.keyCode != 8) /*delete*/ {
    event.preventDefault();
  }
});

body {
  padding: 10px 0 0 10px;
}
#editcontent {
  width: 200px;
  height: 50px;
  border: 1px solid blue;
}
#editcontent:after {
  color: #999;
  content: 'Enter text';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editcontent" contenteditable="true"></div>
<span></span>