具有内容可编辑的Javascript MaxLength

Question

我想限制用户最多输入十个字符。我能够这样做，但是当我选择一个文本并尝试替换它时，我无法这样做。例如：如果我突出显示“ mm”，则无法替换它，因为最大长度为10。如何在具有maxlength的情况下这样做？ 这是我的js函数：

$('div').on('keydown', function(event) {
  $('span').text('Total chars:' + $(this).text().length);
  if($(this).text().length === 10 && event.keyCode != 8) {
    event.preventDefault();
  }
});

Answer 1

使用突出显示的文本长度作为参数

$('div').on('keydown', function(event) {
  var selection = window.getSelection().getRangeAt(0);
  $('span').text('Total chars:' + $(this).text().length);
  if($(this).text().length === 10-selection && event.keyCode != 8) {
  	event.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">mm/dd/yyyy</div>
<span></span>