Limiting the number of characters in the text fields of the HTML form

When designing and publishing online forms, you may often want to limit the number of characters that can be entered in text fields, such as textarea or input type=”text”, and in some cases display them to the user.

In particular, in multi-line free text fields, such as contact fields, it is prudent to limit input so that users can copy entire novels or edit only a limited number of characters.

Limiting characters in “textarea

For multi-line elements of text areas in HTML tables, i.e. “textarea” types, the usual character delimitation is relatively simple. Therefore, the HTML syntax includes the maxlength attribute. The following code example shows what a 50-character limit looks like.

<textarea maxlength="50"> Enter text here... </textarea>

Limiting characters for input type=”text”

In HTML, for a single-line input field, denoted by input type=”text”, the limit on the number of characters can be set using the maxlength attribute, just as for a multi-line text field. In HTML, the corresponding code example would look like this: maxlength=”100 characters”. This time the limit is 100 characters.

<input type="text" name="occasion" value="" maxlength="100">

Limiting character input with JavaScript

Unique restrictions on the number of characters in the text boxes of the HTML form result in a poor or unattractive user experience. Even if you try by all means to hit the keys, for some reason you cannot go any further. Therefore, it is preferable to at least specify in the description that only “XX characters” can be used. It would be nice if the number of characters remaining could be displayed visually, as in the image above.

To display the character limit, use the appropriate JavaScript. In this example, a five-line text field is referenced in the online form and the number of characters is displayed as “of/max” as follows.

<div>
<textarea id="comment" name="comment" rows="5" maxlength="500"></textarea>
<div id="the-count_comment" style="">
<span id="current_comment">0</span>
<span id="maximum_comment"> / 500</span>
</div>

The corresponding JavaScript is configured as follows. Depending on the threshold, the screen format will have a color code to reflect a limited number of characters.

<script>
$('#comment').keyup(function () {
  var characterCount = $(this).val().length,
  current = $('#current_comment'),
  maximum = $('#maximum_comment'),
  theCount = $('#the-count_comment');
  var maxlength = $(this).attr('maxlength');
  var changeColor = 0.75 * maxlength;
  current.text(characterCount);

  if (characterCount > changeColor && characterCount < maxlength) {
    current.css('color', '#FF4500');
    current.css('fontWeight', 'bold');
  }
  else if (characterCount >= maxlength) {
    current.css('color', '#B22222');
    current.css('fontWeight', 'bold');
  }
  else {
    var col = maximum.css('color');
    var fontW = maximum.css('fontWeight');
    current.css('color', col);
    current.css('fontWeight', fontW);
  }
});
</script>

Form generators such as HeyForm offer this functionality. It can save you a lot of work, especially if you need to create a lot of forms because in my experience it’s a bit tricky until everything is configured to your liking.