0

This is my current system:

  • I have a contenteditable div where users can insert text, images, links etc.
  • The HTML from that div is inserted into a database.
  • If the div has a data which exceeds the length of the field in the database the data is truncated.

I want to add a limit to the contenteditable div so that the data entered by the user will never be truncated however I don't know how to implement a limit to the div since the actual HTML is counted in the field space not just what the user sees like the text.

I'm not asking how to actually limit the number of characters since I already found another question which solves this, but I want to know how to limit data in a user friendly way without my validation saying something like "Your data must be at most 500 characters" when most of the characters could be made up of HTML which the user cannot see.

Are there any solutions to such an issue on the front end side or the database side? Thanks.

Community
  • 1
  • 1
Pav Sidhu
  • 6,724
  • 18
  • 55
  • 110

1 Answers1

1

It's hard to say without seeing your actual code, but could you not show a character count but programmatically exclude your html from the count? You could have a function with a structure similar to the following pseudo-code:

div. Bind keydown event{
    var total = how many characters are in the div?
    if(are there any of the character sequences that match excluded html patterns?){
        var numCharacters = how many characters are in each excluded sequence?
        var calcCharacters = total - numCharacters
    }else{
        var calcCharacters = total
    }
    characterCountIndicator. update value(calcCharacters);
}
Chris Patty
  • 189
  • 1
  • 3
  • 12