Javascript MaxLength with contenteditable

Question

我想限制用戶最多輸入十個字符。 我可以這樣做，但是當我 select 一個文本並嘗試替換它時，我無法這樣做。 例如：如果我在“mm”上突出顯示，那么我無法替換它，因為最大長度為 10。我如何在擁有最大長度的情況下這樣做？ 這是我的 js function：

$('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>