How to Emulate an HTML Input "Maxlength" Attribute on an HTML Textarea

How to impose maxlength on textArea in HTML using JavaScript

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;
    } 
  };

}

HTML INPUT element with maxLength loses text when paste from clipboard

Unfortunately, the one you face is the expected work of maxlength attribute. It is smart enough to capture that part that is less than or equal to the maxlength. If you do not want this working, you have to manually handle it through JavaScript, and it is pretty straightforward. Here's a quick example:

function checkLength() {
  var input = document.getElementById("value")
  if (input.value.length >= 5) // 5 is your maxlength
     input.value='';
}

<input type="text" id="value" onInput="checkLength();"/>

Can input be limited to html textarea?

This is a solution for HTML5, not supported by IE9 or earlier (according to this):

<textarea maxlength="255"></textarea>

Since you probably can't drop support for IE9 (and maybe even IE8), it's recommended you couple that with JavaScript, preventing the default behavior for the keydown and paste events on the textarea, as standup75 suggested.

Here is how to do that with plain JavaScript:

<textarea id="txtarea" maxlength="255"></textarea>
<script>
var field = document.getElementById('txtarea');
if(field.addEventListener) {
    field.addEventListener('keydown', enforceMaxlength);
    field.addEventListener('paste', enforceMaxlength);
} else {
    // IE6-8
    field.attachEvent('onkeydown', enforceMaxlength);
    field.attachEvent('onpaste', enforceMaxlength);
}

function enforceMaxlength(evt) {
   var maxLength = 255;
    if(this.value.length >= maxLength) {
        evt.preventDefault()
    }
}
</script>

http://jsfiddle.net/snJwn/

textarea character limit

Generate functions that will either truncate the value or prevent the Event under your conditions, and then add them as several different listeners for all the events you're interested in.

function snip(len) {
    return function (e) {e.target.value = e.target.value.slice(0, len);};
}
function prevent(len) {
    return function () {
        if (e.target.value.length >= len) {
            e.preventDefault();
            return false;
        }
    };
}

var len = 5; // choose your length however you want

var textarea = document.getElementById('texta'), // get the node
    trunc = snip(len),
    prev1 = prevent(len),
    prev2 = prevent(len - 1);

textarea.addEventListener('change'  , trunc, true);
textarea.addEventListener('input'   , trunc, true);
textarea.addEventListener('keydown' , prev2, true);
textarea.addEventListener('keypress', prev2, true);
textarea.addEventListener('keyup'   , prev1, true);
textarea.addEventListener('paste'   , trunc, true);

The events may need to be attached differently in IE

DEMO

How to limit the size of an HTML textarea with JavaScript?

Take a look at this page:

Interactive character limit for textarea using Jquery

 <script language="javascript">
 function limitChars(textid, limit, infodiv)
 {
     var text = $('#'+textid).val(); 
     var textlength = text.length;
     if(textlength > limit)
     {
         $('#' + infodiv).html('You cannot write more then '+limit+' characters!');
          $('#'+textid).val(text.substr(0,limit));
          return false;
     }
     else
     {
      $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
      return true;
     }
 }
 </script>

Then bind the function to the keyup event of your textarea. Do this in jQuery’s ready event of document like this:

$(function(){
    $('#comment').keyup(function()
    { 
        limitChars('comment', 20, 'charlimitinfo'); 
    })
});

What is the clearist notification method for html5 maxlength, or is it possible?

You could to a certain extent use the pattern attribute. For a maxlength of 10 you would write <input type="text" pattern=".{0,10}" />.

Now you would have to display the error message via CSS with help of the :invalid-selector.

Here is an example.

Edit: This doesn't seem to be working with textarea, though … I am having a look into it right now.

---

Related Topics