CODEWITHSUNDEEP
javascriptjqueryhtmlcontenteditablemaxlength
Andrew.Wolphoe
Andrew.Wolphoe

Reputation: 430

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

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?

Upvotes: 4

Views: 910

Answers (4)

RohitS
RohitS

Reputation: 1046

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(/&nbsp;/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>

Upvotes: 2

notrota
notrota

Reputation: 1088

The input event is supported with contenteditable, then just stop the event if there is too much text like so:

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>

However, just stay away from contenteditable events. they are bad

Upvotes: 3

A. Iglesias
A. Iglesias

Reputation: 2675

// 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.
    }
});

Upvotes: -1

Manav
Manav

Reputation: 1367

<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 onkeypress when the character count is greater than or equal to 200

Upvotes: 0

Related Questions