When designing or publishing an online form, it often happens that you want to limit the number of characters that can be entered in a text field, such as textarea or input type=”text”, and you may also want to visualize this to the user, similar to the image below.
Especially with free multi-line text fields, as often used in contact forms, it makes sense to limit the input so that whole novels cannot be copied in or if only a limited number of characters is available for further processing.
Limit characters at <textarea>
The simple character delimitation in an HTML form for a multiline text field element, i.e. of the type <textarea> is relatively simple. The HTML syntax provides the attribute maxlenght for this purpose. The following sample code shows what a character limit of 50 characters would look like.
<textarea maxlength="50">
Text hier eingeben...
</textarea>
Limit characters at <input type=”text”>.
With the single-line input field, which is represented in HTML by <input type=”text”>, the character limit can be inserted in the same way via the maxlength attribute as with the multiline text field. The corresponding example code in HTML looks like this. This time with a limit of 100 characters.
<input type="text" name="occasion" value="" maxLength="100">
Limit character input with JavaScript
Limiting the number of characters in a text field of an HTML form alone leads to a poor user experience or unsightly usability. One simply wonders why it doesn’t continue despite a strong impact on the keyboard. So you should at least note that only “XX characters” are available. It’s even nicer if you can visualize how many characters are left as shown in the gif image above.
For the representation of the character limit one uses an appropriate JavaScript. The example refers to a 5-line text field in an online form under which the number of characters is displayed as “from/max“.
<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 associated JavaScript can then look like the following. Based on a limit value, the formatting of counted letters is changed in another color to visualize the 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, like the DA-FormMaker, bring such functions with them. Then you save yourself this work, especially if you have to create several forms, as it is a bit of fiddling until you have configured everything according to your wishes.
