Javascript MaxLength с контентом

Question

Я хочу ограничить пользователей вводом не более десяти символов. Мне удалось это сделать, но когда я выбираю текст и пытаюсь заменить его, я не могу этого сделать. Например: если я выделю «мм», то я не смогу заменить его, так как максимальная длина равна 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>