Limit Contenteditable Div Height

div is limited to a maximum height of 300px , when I input some text, after div reaches 300px text overflows.how to stop text input when div reaches 300px. I used overflow:hidden;

Solution 1:

Try this code, Demo

$("editable").addEvent('keypress', function (e) {
    var element = this;
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
        e.stop();
    }
});

Solution 2:

editable.onkeyup=function(){
  if(editable.innerHeight>='300px'){
    editable.style.height='300px';
  }
}

Solution 3:

I struggled with a very similar issue. Here is what I came up after looking at several examples:

<div contenteditable='true' id="message_area" max-width: 100px;' >
</div>
<script type='text/javascript'>
jQuery("div#message_area").on('keypress', () => {
   if ( event.target.innerText.trim().length >= 10 ) {
      event.preventDefault();
      return false;
   }
});
</script>