Character limits on textarea fields - pros and cons and best practices?

  • Some of our form fields have character limits. We're debating whether we should reflect the current size of data entry, or to simply hard-limit and inhibit data entry beyond that size.

    In HTML, simple <input> elements can have a maxlength attribute that inhibits further entry, but <textarea> has no built in option. Character limits in <textarea> can easily be imposed via javascript.

    Twitter shows the remaining available characters, and will let you type more than that in but shows it as an error (and disables the action button).

    twitter limit remaining twitter limit exceeded

    We're looking at proactively showing the number of allowed characters for a limited field, and showing the number of characters remaining. If the user exceeds the limit then an inline form invalidation message appears.

    limit shown, characters remaining field limit exceeded

    A counter argument is that users don't even notice the little numbers updating, and that the user might well end up expending a great deal of effort typing something which they then need to trim.

    What are some of the pros and cons of using these character counters?

    Personally, I do notice the twitching wriggling little numbers as I'm typing. And I also find it frustrating if I attempt to copy/paste something into a field and have it either disallow it completely, or silently truncates at the character limit.

    Edited to add red border to invalid field, as that is our house style.

    As long as the numbers constantly update it clearly draws attention to the eyes. I recently had a user request this feature on a form field with an (incorrect) character limit, so even non-technical users seem familiar with this concept.

    I'm surprised no one has mentioned the subtly color changing "characters left" text on SE sites, I like it a lot. Starts grey and barely noticeable, turns orange to let you notice it, then finally red for the subtle "OMG WTF ARE YOU DOING" moment when you cross into too many characters.

    • When no text, make the message simply indicate the max number of characters (no mention of the number remaining.

    • As you type, the number of remaining characters fades from grey to black (very subtle indication)

    • When you reach the limit, change the border to red; make any excess text a different colour; show a small error icon below and indicate a number of excess characters - but now in red. You could make the redness fade in over a couple of seconds so as not to be too much of a 'shock'.

    The colourisation of the excess text lets the user see just how much the excess is. I always find it annoying having to guess how much of my text is actually the excess amount and it's nice to have it clearly marked.

    But never limit the actual number of characters that can be entered to the actual limit you show as the maximum - that's a disaster area. It's always good to be able to finish the flow of what you want to say and then edit down.

    The colourised text is great during the edit down process because the feedback is right there in context instead of having to look at the number. As soon as it goes back below the limit - remove all the red bits.

    enter image description here


    Jon W mentioned about Digsby - just downloaded it to check it out - and here's a screenshot of the twitter app in Digsby, which changes the background of the excess text to red and text to white. It's a bit harsh on the eye, but same fundamental principle wrt to the text format changing.

    enter image description here

    This is just how the Twitter app in Digsby works. (Although with less Hipster-Ipsum)

    I see you really ARE using the hipster ipsum site!

    @JonW Thanks for that reference - I downloaded Digsby and took a look. For completeness, I added a screenshot to my answer.

    @BenBrocka - I like to stay topical for a few days at least - who knows what I'll use next week :-)

    How do I make rest of my text (that exceeds the limit) red? with textarea/input? I don't wanna use contenteditable. Let me know if it's possible.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM