Javascript MaxLength with contenteditable

Question

I want to restrict the users to enter max ten characters. I was able to do so, but when I select a text and try to replace it, I'm unable to do so. For Ex: If I highlight on the "mm" then I'm unable to replace it as the max length is 10. How can I do so while having the maxlength? Here is my js function:

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

user_2576254 · Answer

use highlighted text length as parameter

$('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();
  }
});


mm/dd/yyyy

Javascript MaxLength with contenteditable

1 Answers