How to impose maxlength on textArea in HTML using JavaScript

Question

I would like to have some functionality by which if I write   lt textarea maxlength  50  gt  lt  textarea gt   lt textarea maxlength  150  gt  lt  textarea gt   lt textarea maxlength  250  gt  lt  textarea gt    it will automatically impose the maxlength on the textArea  If possible please do not provide the solution in jQuery   Note  This can be done if I do something like this    lt textarea onkeypress  return imposeMaxLength event  this  110    rows  4  cols  50  gt   function imposeMaxLength Event  Object  MaxLen        return  Object value length  lt   MaxLen    Event keyCode    8   Event keyCode  46   Event keyCode gt  35 amp  amp Event keyCode lt  40       Copied from What is the best way to emulate an HTML input    maxlength    attribute on an HTML textarea   But the point is I don t want to write onKeyPress and onKeyUp every time I declare a textArea

User · Answer

I know you want to avoid jQuery  but as the solution requires JavaScript  this solution  using jQuery 1 4  is the most consise and robust    Inspired by  but an improvement over Dana Woodman s answer   Changes from that answer are  Simplified and more generic  using jQuery live and also not setting val if length is OK  leads to working arrow-keys in IE  and noticable speedup in IE       Get all textareas that have a  maxlength  property  Now  and when later adding HTML using jQuery-scripting     textarea maxlength    live  keyup blur   function            Store the maxlength and value of the field      var maxlength     this  attr  maxlength        var val     this  val            Trim the field if it has content over the maxlength      if  val length  gt  maxlength              this  val val slice 0  maxlength                EDIT  Updated version for jQuery 1 7   using on instead of live     Get all textareas that have a  maxlength  property  Now  and when later adding HTML using jQuery-scripting     textarea maxlength    on  keyup blur   function            Store the maxlength and value of the field      var maxlength     this  attr  maxlength        var val     this  val            Trim the field if it has content over the maxlength      if  val length  gt  maxlength              this  val val slice 0  maxlength

User · Answer

Update Use Eirik s solution using  live   instead as it is a bit more robust     Even though you wanted a solution that wasn t using jQuery  I thought I d add one in for anyone finding this page via Google and looking for a jQuery-esque solution     function                    Get all textareas that have a  maxlength  property         textarea maxlength    each function                 Store the jQuery object to be more efficient            var  textarea     this               Store the maxlength and value of the field          var maxlength    textarea attr  maxlength            var val    textarea val                Trim the field if it has content over the maxlength           textarea val val slice 0  maxlength                Bind the trimming behavior to the  keyup  event           textarea bind  keyup   function                  textarea val  textarea val   slice 0  maxlength                               Hope that is useful to you Googlers out there

User · Answer

The maxlength attribute is supported in Internet Explorer 10  Firefox  Chrome  and Safari  Note  The maxlength attribute of the  lt textarea gt  tag is not supported in Internet Explorer 9 and earlier versions  or in Opera   from HTML  maxlength Attribute w3schools com For IE8 or earlier versions you have to use the following   only call this function in IE function maxLengthLimit  textarea       var maxlength   parseInt  textarea attr  quot maxlength quot           in IE7 maxlength attribute can t be got I don t know why        if   browser version   quot 7 0 quot            maxlength   parseInt  textarea attr  quot length quot                textarea bind  quot keyup blur quot  function            if this value length gt maxlength               this value this value substr 0 maxlength                        P S   The maxlength attribute of the  lt input gt  tag is supported in all major browsers   from HTML  maxlength Attribute w3schools com

User · Answer

HTML5 adds a maxlength attribute to the textarea element  like so    lt  DOCTYPE html gt   lt html gt       lt body gt           lt form action  processForm php  action  post  gt               lt label for  story  gt Tell me your story  lt  label gt  lt br gt               lt textarea id  story  maxlength  100  gt  lt  textarea gt               lt input type  submit  value  Submit  gt           lt  form gt       lt  body gt   lt  html gt    This is currently supported in Chrome 13  FF 5  and Safari 5   Not surprisingly  this is not supported in IE 9    Tested on Win 7

User · Answer

Also add the following event to deal with pasting into the textarea        txts i  onkeyup   function              txts i  paste   function       var len   parseInt this getAttribute  maxlength    10      if  this value length   window clipboardData getData  Text   length  gt  len        alert  Maximum length exceeded      len       this value   this value substr 0  len       return false

User · Answer

Better Solution compared to trimming the value of the textarea      textarea maxlength    live  keypress   function e        var maxlength     this  attr  maxlength        var val     this  val         if  val length  gt  maxlength            return false

User · Answer

This is much easier    x000D   x000D   lt textarea onKeyPress  return   this value length  lt  1000     gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

This is some tweaked code I ve just been using on my site   It is improved to display the number of remaining characters to the user    Sorry again to OP who requested no jQuery   But seriously  who doesn t use jQuery these days      function            Get all textareas that have a  maxlength  property         textarea maxlength    each function                 Store the jQuery object to be more efficient            var  textarea     this               Store the maxlength and value of the field         var maxlength    textarea attr  maxlength                Add a DIV to display remaining characters to user          textarea after     lt div gt    addClass  charsRemaining                 Bind the trimming behavior to the  keyup   amp   blur  events  to handle mouse-based paste           textarea on  keyup blur   function event                   Fix OS-specific line-returns to do an accurate count             var val    textarea val   replace   r n  r  n g    r n   slice 0  maxlength                textarea val val                  Display updated count to user              textarea next   charsRemaining   html maxlength - val length     characters remaining               trigger  blur                   Has NOT been tested with international multi-byte characters  so I m not sure how it works with those exactly

User · Answer

window onload   function        var txts   document getElementsByTagName  TEXTAREA        for var i   0  l   txts length  i  lt  l  i          if    0-9     test txts i  getAttribute  maxlength              var func   function              var len   parseInt this getAttribute  maxlength    10             if this value length  gt  len               alert  Maximum length exceeded      len              this value   this value substr 0  len              return false                             txts i  onkeyup   func        txts i  onblur   func

User · Answer

Small problem with code above is that val   does not trigger change   event  so if you using backbone js  or another frameworks for model binding   model won t be updated   I m posting the solution worked great for me     function             document  on  keyup     ie8 textarea maxlength    ie9 textarea maxlength    function  e            var maxLength     this  attr  maxlength            if  e keyCode  gt  47  amp  amp    this  val   length  gt   maxLength                  this  val   this  val   substring 0  maxLength   trigger  change                      return true

User · Answer

This solution avoids the issue in IE where the last character is removed when a character in the middle of the text is added   It also works fine with other browsers      textarea maxlength    keydown  function e        var key   e which      backspace   8  delete   46  arrows   37 38 39 40      if     key  gt   37  amp  amp  key  lt   40      key    8    key    46   return       return   this  val   length  lt    this  attr   maxlength           My form validation then deals with any issues where the user may have pasted  only seems to be a problem in IE  text exceeding the maximum length of the textarea

User · Answer

I implemented maxlength behaviour on textarea recently  and run into problem described in this question  Chrome counts characters wrong in textarea with maxlength attribute   So all implementations listed here will work little buggy  To solve this issue I add  replace    r n  n  r  g   11   before  length  And kept it in mind when cuting string   I ended with something like this   var maxlength   el attr  maxlength    var val   el val    var length   val length  var realLength   val replace    r n  n  r  g   11   length  if  realLength  gt  maxlength        el val val slice 0  maxlength -  realLength - length         Don t sure if it solves problem completely  but it works for me for now

User · Answer

Try this jQuery which works in IE9  FF  Chrome and provides a countdown to users       comments   bind  keyup keydown   function         var max   500      var value     this  val        var left   max - value length      if left  lt  0              this  val  value slice 0  left             left   0                charcount   text left          lt textarea id  comments  onkeyup  ismaxlength this 500   gt  lt  textarea gt   lt span class  max-char-limit  gt  lt span id  charcount  gt 500 lt  span gt  characters left lt  span gt

User · Answer

Try to use this code example       TextAreaID1   bind  input propertychange   function          var maxLength   4000      if    this  val   length  gt  maxLength              this  val   this  val   substring 0  maxLength

User · Answer

You can use jQuery to make it easy and clear  JSFiddle DEMO   lt textarea id  ta  max  10  gt  lt  textarea gt    lt script gt      ta   keypress function e        var k   e which  0   e keyCode   e which        alert k       if k  8    k  37    k  39    k  46  return true       var text          this  val        var maxlength     this  attr  max         if text length  gt   maxlength            return false               return true       lt  script gt    It is tested in Firefox  Google Chrome and Opera

[javascript] How to impose maxlength on textArea in HTML using JavaScript

Examples related to javascript

Examples related to html

Examples related to textarea