Textarea Character Limit

textarea character limit

I found a good solution that uses the maxlength attribute if the browser supports it, and falls back to an unobtrusive javascript pollyfill in unsupporting browsers.

Thanks to @Dan Tello's comment I fixed it up so it works in IE7+ as well:

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

Javascript:

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text"));

Demo

There is no such thing as a minlength attribute in HTML5.

For the following input types: number, range, date, datetime, datetime-local, month, time, and week (which aren't fully supported yet) use the min and max attributes.

Should I always put a limit on a textarea?

I think a limit would make sense for two main reasons:

1. Validation

   You have stated that already in your question. You maybe need to valiate your input regarding any corrupt characters or sql injections. If you do not limit it and you get many characters, your system may take to long to validate - this will depend wheather you check it locally or on server side.

2. Storage
   
   I am not sure how you will use the content, but in case of an CMS you have to save the posts in a database. A database will have different attributes with size settings. You will have to define the maximum size of your varchar in the database. Increasing that size will lead into potential errors and slow database.

<textarea> character limit

Generate functions that will either truncate the value or prevent the Event under your conditions, and then add them as several different listeners for all the events you're interested in.

function snip(len) {
    return function (e) {e.target.value = e.target.value.slice(0, len);};
}
function prevent(len) {
    return function () {
        if (e.target.value.length >= len) {
            e.preventDefault();
            return false;
        }
    };
}

var len = 5; // choose your length however you want

var textarea = document.getElementById('texta'), // get the node
    trunc = snip(len),
    prev1 = prevent(len),
    prev2 = prevent(len - 1);

textarea.addEventListener('change'  , trunc, true);
textarea.addEventListener('input'   , trunc, true);
textarea.addEventListener('keydown' , prev2, true);
textarea.addEventListener('keypress', prev2, true);
textarea.addEventListener('keyup'   , prev1, true);
textarea.addEventListener('paste'   , trunc, true);

The events may need to be attached differently in IE

DEMO

React TS - Max character limit for textarea

1. Object is possibly 'undefined'.ts(2532)

ITextarea defines maxLength as an optional parameter. If you don't pass a value for it, its value will be undefined.

2. This happens because React state updates aren't immediate, they happen on the next render pass. You're calling handleCharLimit, but when you invoke it, value hasn't actually been updated yet, even though it's called after setValue. You should be using useEffect or useMemo to update your charLimit in response to a change in value.

See an updated version here: https://codesandbox.io/s/hungry-fermi-bsmny

---

Related Topics