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

Solution 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.

Solution 2

I did something like this by using the above mentioned answer to generalize the code, so that you can set the max length for any contenteditable div

$("div[contenteditable='true'][maxlength]").on('keydown paste', function (event) {
     var cntMaxLength = parseInt($(this).attr('maxlength'));

     if ($(this).text().length === cntMaxLength && event.keyCode != 8) {
         event.preventDefault();
     }
});

HTML will be as bewlow

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

this way you can mention the maxlenght to any of the contenteditable Div elemen. Hope this is helpful.

Solution 3

This code does the job, note the "keyup" instead of "keydown" for correct processing of ctrl-v event, in addition, this code excludes arrow keys, finally please note the code that cut the text if you reach the limit:

$("div[contenteditable='true'][maxlength]").on('keyup paste', function (event) {
     var cntMaxLength = parseInt($(this).attr('maxlength'));

     if ($(this).text().length >= cntMaxLength && event.keyCode != 8 && 
         event.keyCode != 37 && event.keyCode != 38 && event.keyCode != 39 && 
         event.keyCode != 40) {
         
         event.preventDefault();

         $(this).html(function(i, currentHtml) {
             return currentHtml.substring(0, cntMaxLength-1);
         });
     }
});

Then, in your html:

<div contenteditable="true" maxlength="1024"></div>

Comments

[DinoMyte]

do you want to restrict the length of characters to 100 or you want the first 100 characters ?

[J.doe]

@DinoMyte i want max length to be 100

[DinoMyte]

Your code works to limit the characters but once you reach the limit, you can't delete any character.

[Paulius Dragunas]

Problem with the is that you can't use your arrow keys, keyboard shortcuts with copy and paste

[Optimus1]

This however doesn't prevent you from pasting more than 100 characters

[Daryll]

You necro'd this post and still used javascript :(

[Vickel]

Please avoid link-only answers, as links can get obsolete. Try to update your answer with the essential part of what you found useful in the link you provided. While this link may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking.

[Vickel]

Please avoid link-only answers, as links can get obsolete. Try to update your answer with the essential part of what you found useful in the link you provided. While this link may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking.

[Mohamad Hamouday]

You should use ">=" instead of "===" in case the user paste a long text and you should trim the extra characters that are more than "max length".