Limit number of characters in contenteditable div

[zerobrainwash]

Hi guys,

Hope you can help out with this one :) I am using a contenteditable div to allow users to format their post cards. This is how it looks like – http://zerobrainwash.com/sandbox/carte/cartes/roses-tulipes/ . The problem is that I want to allow only specific amount of characters per paragraph, however contenteditable divs don’t have built-in functionality to do that and I can’t figure out how to do that with Javascript either.

One possible solution that I thought of is insert at the end of paragraph and let the user to keep on typing. But the behavior is different than to what I expected. Instead of making user to type after tag, the cursor stays before tag which results in unexpected behavior.

Any thoughts of how this situation could be handled?

P.S. what I also don’t get is how, let’s say, editor in WordPress, upon pressing some tag, let’s say , it inserts into editor and places cursor in the middle. How is that done? Cheers!

[dyr]

Can you post a reduced case on CodePEN?

Is there a maximum of 3 paragraphs? And how many character limit per paragraph? Is the number of paragraphs always the same?

I’ve not used contenteditable divs much but another option would be to just have textarea form inputs beside or below the preview area and allow the users to type into there and live-update the preview. Then you could just do whatever validation logic on those textareas that you wanted. For example, you could make it so that when a certain number of characters are entered into one textarea the cursor moves down to the next automatically.

Like I said, I’m not very familiar with contenteditable. I believe there is a way to do exactly as you described since, in your case, it appears that the contenteditable div simple contains a number of paragraph tags that get dynamically inserted when a person types. You would need to keep track of distinct paragraphs (a series of P tags with content in them, followed by an empty P tag), and bind some events to enforce a strict number of characters per paragraph, automatically adding an empty P tag in between paragraphs and disallowing editing of that empty P tag. This seems overly complicated and sounds like a pain in the ass the do though.

I also haven’t used the WordPress editor in a long time. Are you describing a hotkey used to place the cursor into the editor window?

Cheers

[Author]

Posts