{"id":2381,"date":"2020-01-03T16:54:54","date_gmt":"2020-01-03T15:54:54","guid":{"rendered":"https:\/\/da-software.de\/?p=2381"},"modified":"2021-06-25T18:05:47","modified_gmt":"2021-06-25T16:05:47","slug":"limit-the-number-of-characters-in-the-text-field-of-an-html-form","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2020\/01\/limit-the-number-of-characters-in-the-text-field-of-an-html-form\/","title":{"rendered":"Limit the number of characters in the text field of an HTML form"},"content":{"rendered":"

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<\/strong> <\/em>or input type=”text”<\/strong><\/em>, and you may also want to visualize this to the user, similar to the image below.<\/p>\n

\"Gif
Example of a text area in online form with character delimitation<\/figcaption><\/figure>\n

Especially with free multi-line text fields, as often used in contact forms<\/a>, 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.
\n\"form<\/a><\/p>\n

Limit characters at <textarea><\/h2>\n

The simple character delimitation in an HTML form for a multiline text field element, i.e. of the type <textarea><\/strong><\/em> is relatively simple. The HTML syntax provides the attribute maxlenght<\/strong> <\/em>for this purpose. The following sample code shows what a character limit of 50 characters would look like.<\/p>\n

<textarea maxlength=\"50<\/span>\"<\/strong>>\r\nText hier eingeben...\r\n<\/textarea> \r\n<\/pre>\n
Limit characters at <input type=”text”>.<\/h2>\n
With the single-line input field, which is represented in HTML by <input type=”text”><\/em>, the character limit can be inserted in the same way via the maxlength<\/em> attribute as with the multiline text field. The corresponding example code in HTML looks like this. This time with a limit of 100 characters.<\/p>\n
<input<\/span> type<\/span>=\"text<\/a>\" name<\/span>=\"occasion<\/a>\" value<\/span>=\"\" maxLength<\/span>=\"100<\/a>\"<\/strong>><\/pre>\n
Limit character input with JavaScript<\/h2>\n
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<\/em>” are available. It’s even nicer if you can visualize how many characters are left as shown in the gif image above.<\/p>\n
For the representation of the character limit one uses an appropriate JavaScript<\/a>. The example refers to a 5-line text field in an online form under which the number of characters is displayed as “from\/max<\/em>“.<\/p>\n
<div<\/span>>\r\n<textarea<\/span> id<\/span>=\"comment<\/a>\" name<\/span>=\"comment<\/a>\" rows<\/span>=\"5<\/a>\" maxlength<\/span>=\"500<\/a>\"><\/textarea<\/span>>\r\n<div<\/span> id<\/span>=\"the-count_comment<\/a>\" style<\/span>=\"\">\r\n<span<\/span> id<\/span>=\"current_comment<\/a>\">0<\/span<\/span>>\r\n<\/span><span<\/span> id<\/span>=\"maximum_comment<\/a>\"> \/ 500<\/span<\/span>>\r\n<\/div<\/span>><\/pre>\n
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.<\/p>\n
<script>\r\n$('#comment').keyup(function () {\r\n  var characterCount = $(this).val().length,\r\n  current = $('#current_comment'),\r\n  maximum = $('#maximum_comment'),\r\n  theCount = $('#the-count_comment');\r\n  var maxlength = $(this).attr('maxlength');\r\n  var changeColor = 0.75 * maxlength;\r\n  current.text(characterCount);\r\n\r\n  if (characterCount > changeColor && characterCount < maxlength) {\r\n    current.css('color', '#FF4500');\r\n    current.css('fontWeight', 'bold');\r\n  }\r\n  else if (characterCount >= maxlength) {\r\n    current.css('color', '#B22222');\r\n    current.css('fontWeight', 'bold');\r\n  }\r\n  else {\r\n    var col = maximum.css('color');\r\n    var fontW = maximum.css('fontWeight');\r\n    current.css('color', col);\r\n    current.css('fontWeight', fontW);\r\n  }\r\n});\r\n<\/script>\r\n<\/pre>\n
Form generators<\/a>, 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.<\/p>","protected":false},"excerpt":{"rendered":"
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 want to visualize this to the user.<\/p>\n","protected":false},"author":2,"featured_media":2382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[92,90,113,162,163,161,111,164,125,165],"class_list":["post-2381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-da-formmaker-en","tag-form","tag-html-en","tag-html-form","tag-input-en","tag-instruction","tag-internet-form","tag-javascript-en","tag-online-form","tag-textarea-en"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=2381"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/2382"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=2381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=2381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=2381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}