Set Maxlength in HTML Textarea

Set maxlength in Html Textarea

Before HTML5, we have an easy but workable way:
Firstly set an maxlength attribute in the textarea element:

<textarea maxlength='250' name=''></textarea>  

Then use JavaScript to limit user input:

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

Make sure the bind both "input" and "propertychange" events to make it work on various browsers such as Firefox/Safari and IE.

Max length for HTML textarea

The TEXTAREA tag does not have a MAXLENGTH attribute the way that an
INPUT tag does, at least not in most standard browsers. A very simple and effective way to limit the number of characters that can be typed into a TEXTAREA tag is:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Note: onKeyPress, is going to prevent any button press, any button including the backspace key.

This works because the Boolean expression compares the field's length
before the new character is added to the maximum length you want (50 in this example, use your own here), and returns true if there is room for one more, false if not. Returning false from most events cancels the default action.
So if the current length is already 50 (or more), the handler returns false,
the KeyPress action is cancelled, and the character is not added.

One fly in the ointment is the possibility of pasting into a TEXTAREA,
which does not cause the KeyPress event to fire, circumventing this check.
Internet Explorer 5+ contains an onPaste event whose handler can contain the
check. However, note that you must also take into account how many
characters are waiting in the clipboard to know if the total is going to
take you over the limit or not. Fortunately, IE also contains a clipboard
object from the window object.1 Thus:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

Again, the onPaste event and clipboardData object are IE 5+ only. For a cross-browser solution, you will just have to use an OnChange or OnBlur handler to check the length, and handle it however you want (truncate the value silently, notify the user, etc.). Unfortunately, this doesn't catch the error as it's happening, only when the user attempts to leave the field, which is not quite as friendly.

Source

Also, there is another way here, including a finished script you could include in your page:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

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

}

How to set different maxLength in textarea for different languages

jQuery solution?

jQuery

$(function(){
    $("#textarea").on("keydown change", function(e){
        if (e.keyCode == 8)
            return;
        var x = $(this).val();
        if (x.match(/[\u3400-\u9FBF]/) && x.length >= 20) {
            e.preventDefault();
            $(this).val(x.substring(0,20));
        } else if (x.length >= 50){
            e.preventDefault();
            $(this).val(x.substring(0,50));
        }
    });
});

Or if you want to make it a jQuery method to make it easier to make multiple special inputs.

Extending that jQuery :D

$(function(){
    $.fn.extend({
        chiInput: function(chiLimit, engLimit){
            chiLimit = parseInt(chiLimit, 10) || 20;
            engLimit = parseInt(engLimit, 10) || 50;
            $(this).on("keydown change", function(e){
                if (e.keyCode == 8)
                    return;
                var x = this.value;
                if (x.match(/[\u3400-\u9FBF]/) && x.length >= chiLimit) {
                    e.preventDefault();
                    this.value = x.substring(0,chiLimit);
                } else if (x.length >= engLimit){
                    e.preventDefault();
                    this.value = x.substring(0,engLimit);
                }
            });
            return this;
        }
    });
});

HTML

<input class="chinese-input" type="text">
<textarea class="chinese-input"></textarea>

So you can do $(".chinese-input").chiInput(20,50) to initiate the function binding on multiple inputs. Yeah!

$(function(){

    $("#textarea").on("keydown change", function(e){

        var x = $(this).val();

        $("#length").text("length: "+x.length);

        if (e.keyCode == 8)

            return;

        if (x.match(/[\u3400-\u9FBF]/) && x.length >= 20) {

            e.preventDefault();

            $(this).val(x.substring(0,20));

        } else if (x.length >= 50){

            e.preventDefault();

            $(this).val(x.substring(0,50));

        }

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<textarea id="textarea" rows=1 cols=50></textarea>

<p id="length">length: </p>

<hr>

<p>You can copy this following Chinese to test: 這是一段中文文字。 (length: 9)</p>

how to add maxlength for TextAreaFor in View using razor engine

You can do it like:

@Html.TextArea("EventNature",new { maxlength=50, // or other value
                                  style = "width: 200px; height: 100px;" })

Just be aware it's an HTML5 attribute

maxlength HTML5
The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.

MDN

---

Javascript(using jQuery) validation for HTML <5:

$('#EventNature').keypress(function(){
    if (this.value.length >= 10) // allowing you to enter only 10 chars.
    return false;        
});​

DEMO

How to use maxlength on textarea in struts 1 html tag

Because this "basic attribute" wasn't even supported in IE before IE10, and was added in HTML 5.

Struts 1 predates that by a significant margin, has been EOL'd, and hasn't seen a new release for some time. Bear in mind that Struts 1.2's last release was, what, 2006-ish?

You may extract the TLD and modify it to allow arbitrary attributes under JSP 2.0:

<dynamic-attributes>true</dynamic-attributes>

---

Related Topics