How to use jquery to prevent a editable div reach over our restricting length

Question

Let's said I have the following code:

<div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div>

In this case, I want to restrict my user, for example, can only put 200 characters in it (including space), how can I restrict it? I know I might achieve it with jquery but most example on webs checks it when they click a button, and as I redesign my code with this StackOverflow question as base, it checks it when the div is clicked but with that in mind you can't alert user when the types over 200 words.

So how can I continuously checking words user type in a contenteditable div and alert them when they reach the limit?

Answer 1

Here is simple pure js solution: if anything is there please comment i will update my answer.. :D

function check()
{
 // get the HTML value.
  var content = document.getElementById('editing').innerHTML;
  //Edit : replace spaces from content (ideally you have to figure out how to remove the posible html tags that user might enter)
  content = content.replace(/ /g," ");
  console.log(content);
 // validate value againts limit say 10 or any constant value.
 if(content.length > 20)
  {
    // alert user.
    alert('limit reached');
    // flush extra characters from end.
    document.getElementById('editing').innerHTML = content.slice(0,content.length-1);
    return;
  }
}


//Edit : if you want remove placeholder from annoying user you can flush it when user gets the focus on it say 

function checkPlaceholder()
{
  document.getElementById('editing').innerHTML = ""; 
}

<div id="editing" contenteditable onInput="check();" onfocus="checkPlaceholder();">Put text here...</div>