Set max length for content editable element

Question

I have got this code

<div id="IIYBAGWNBC" contenteditable="true"></div>

And this in jquery

$("#IIYBAGWNBC").text(function(index, currentText) {
  return currentText.substr(0, 100);
});

How do I prevent the user to enter more than 100 characters in contenteditable div

Answer 1

It's pretty simple, on keydown, count the length of element's string and prevent user if he tries to feed more than 100 chars

$('div').on('keydown paste', function(event) { //Prevent on paste as well

  //Just for info, you can remove this line
  $('span').text('Total chars:' + $(this).text().length); 

  //You can add delete key event code as well over here for windows users.
  if($(this).text().length === 100 && event.keyCode != 8) { 
    event.preventDefault();
  }
});

Demo

Explanation:

On keydown or paste event on the contenteditable div we check if the length of the div reached 100 and if user is not clicking backspace key than prevent user to feed in more characters by clicking any key or even pasting with right click.