Character Limit in HTML

HtmlCharacter Limit

Html Problem Overview


How do you impose a character limit on a text input in HTML?

Html Solutions


Solution 1 - Html

There are 2 main solutions:

The pure HTML one:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

The JavaScript one (attach it to a onKey Event):

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}

But anyway, there is no good solution. You can not adapt to every client's bad HTML implementation, it's an impossible fight to win. That's why it's far better to check it on the server side, with a PHP / Python / whatever script.

Solution 2 - Html

there's a maxlength attribute

<input type="text" name="textboxname" maxlength="100" />

Solution 3 - Html

In addition to the above, I would like to point out that client-side validation (HTML code, javascript, etc.) is never enough. Also check the length server-side, or just don't check at all (if it's not so important that people can be allowed to get around it, then it's not important enough to really warrant any steps to prevent that, either).

Also, fellows, he (or she) said HTML, not XHTML. ;)

Solution 4 - Html

use the "maxlength" attribute as others have said.

if you need to put a max character length on a text AREA, you need to turn to Javascript. Take a look here: https://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript

Solution 5 - Html

For the <input> element there's the maxlength attribute:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

(by the way, the type is "text", not "textbox" as others are writing), however, you have to use javascript with <textarea>s. Either way the length should be checked on the server anyway.

Solution 6 - Html

you can set maxlength with jquery which is very fast

jQuery(document).ready(function($){ //fire on DOM ready
 setformfieldsize(jQuery('#comment'), 50, 'charsremain')
})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIwasakabukimanView Question on Stackoverflow
Solution 1 - Htmle-satisView Answer on Stackoverflow
Solution 2 - HtmlcruizerView Answer on Stackoverflow
Solution 3 - HtmlDevin JeanpierreView Answer on Stackoverflow
Solution 4 - HtmlnickfView Answer on Stackoverflow
Solution 5 - HtmlpilsetnieksView Answer on Stackoverflow
Solution 6 - Htmlshekh danishuesnView Answer on Stackoverflow