How to use jquery to prevent editable div from being available to our restrictive length

Question

Let me have the following code:

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

Run codeHide result

In this case, I want to limit my user, for example, can only put 200 characters (including space), how can I limit it? I know that I can achieve this with jquery, but most examples on websites check it when they click a button, and when I re-design my code with https://stackoverflow.com/a/1687971/ ... as a base, it checks this is when the div is clicked, but with that in mind you cannot warn the user when types are over 200 words.

So, how can I constantly check the user's word type in the contenteditable div and warn them when they reach the limit?

Answer 1

Here is a simple clean js solution: if there is anything, 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>

Run codeHide result

Answer 2

The input event is supported using contenteditable, and then just stop the event if there is too much text:

var el = document.getElementById('editing');
var max = 20;
el.addEventListener('input', function(e) {
  if (el.innerHTML.length > max) {
    el.innerHTML = el.innerHTML.substr(0, max); // just in case
    alert('Not allowed more than ' + max + ' characters');
  }
});

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

Run codeHide result

However, stay away from content events. they are bad

Answer 3

<div id="editing" contenteditable onkeypress = "if($(this).text().length >= 200) {return false; }"onclick="alert(document.execCommand('selectAll',false,null)">Put text here...</div>

You return false onkeypresswhen the number of characters is greater than or equal to 200

Answer 4

// Detect when you add a character to the div.
$('div#editing').on('keydown',function(e) {
    // Check if you already have 200 characters (but allow 'backspace' and 'del' keys).
    if (e.keyCode != 8 && e.keyCode != 46 && $(this).text().length >= 200) {
        alert('The field is limited to 200 characters');
        return false; // This will make the new character to be ignored.
    }
});