Javascript MaxLength 与 contenteditable

Question

我想限制用户最多输入十个字符。我能够这样做，但是当我选择文本并尝试替换它时，我无法这样做。例如:如果我突出显示“mm”，那么我无法替换它，因为最大长度是 10。在具有最大长度的情况下如何才能做到这一点？ 这是我的 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>