Enforcing Maximum Length on HTML Textareas Using JavaScript How can you impose a maximum length on elements in HTML using pure JavaScript without resorting to jQuery? This question arises when you want to control the amount of user input and prevent text overflows.</p> <p>One method involves handling keypress events using onkeypress and onkeyup attributes in each textarea:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> function imposeMaxLength(event, object, maxLength) { return (object.value.length <= maxLength) || (event.keyCode == 8 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 40)); } Copy after login However, manually adding these attributes to every textarea can become tedious. Here's an alternative approach that automates the process: window.onload = function() { var txts = document.getElementsByTagName('TEXTAREA'); for (var i = 0, l = txts.length; i < l; i++) { if (/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { var func = function() { var len = parseInt(this.getAttribute("maxlength"), 10); if (this.value.length > len) { alert('Maximum length exceeded: ' + len); this.value = this.value.substr(0, len); return false; } } txts[i].onkeyup = func; txts[i].onblur = func; } } };Copy after login This script initializes on page load and iterates through all elements in the document. For each textarea with a numeric maxlength attribute, it defines a function that checks if the text exceeds the limit. If so, it alerts the user and truncates the input to the maximum length. By assigning this function to onkeyup and onblur events, the maxlength restriction is applied automatically without the need to manually attach event handlers.</p>
