textarea character limit

Question

I would like to be able to limit the number of characters in a textarea  The method I am using works great in Google Chrome  but is slow in Firefox  and doesn t work in IE   Javascript   function len      t v textarea value    if t v length gt 180       long post container innerHTML long post      post button className post button className replace  post it regular   post it disabled        post button disabled true        else      long post container innerHTML         post button className post button className replace  post it disabled   post it regular        post button disabled false        if t v length gt 186           t v t v substring 0 186             HTML    lt textarea id  user post textarea  name  user post textarea  cols  28  rows  1   onkeypress  len     onkeyup  len     gt  lt  textarea gt    Javascript at bottom of body element   textarea document getElementById  user post textarea

User · Accepted Answer

I found a good solution that uses the maxlength attribute if the browser supports it, and falls back to an unobtrusive javascript pollyfill in unsupporting browsers.

Thanks to @Dan Tello's comment I fixed it up so it works in IE7+ as well:

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

Javascript:

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text"));

Demo

There is no such thing as a minlength attribute in HTML5.
For the following input types: number, range, date, datetime, datetime-local, month, time, and week (which aren't fully supported yet) use the min and max attributes.

User · Answer

This is entirely untested but it should do what you need   Update   here s a jsfiddle to look at  Seems to be working  link  You would past it into a js file and reference it after your jquery reference  You would then call it like this       textarea   characterCounter 200     A brief explanation of what is going on    On every keyup event the function is checking what type of key is pressed  If it is acceptable the the counter will check the count  trim any excess and prevent any further input once the limit is reached   The plugin should handle pasting into the target too        function                 fn characterCounter   function  limit                return this filter  textarea  input text   each function                      var  this     this                     checkCharacters   function  event                           if   this val   length  gt  limit                                  Trim the string as paste would allow you to make it                               more than the limit                             this val  this val   substring 0  limit                                Cancel the original event                           event preventDefault                              event stopPropagation                                                                    this keyup function  event                            Keys  enumeration                      var keys                             BACKSPACE  8                          TAB  9                          LEFT  37                          UP  38                          RIGHT  39                          DOWN  40                                                which normalizes keycode and charcode                      switch  event which                             case keys UP                          case keys DOWN                          case keys LEFT                          case keys RIGHT                          case keys TAB                              break                          default                              checkCharacters event                               break                                                                    Handle cut paste                   this bind  paste cut   function  event                           Delay so that paste value is captured                      setTimeout function      checkCharacters event   event   null     150                                                         jQuery

User · Answer

using maxlength attribute of textarea would do the trick     simple html code    not JS or JQuery or Server Side Check Required

User · Answer

I believe if you use delegates  it would work       textarea   on  change paste keyup   function          var currText     this  val        if  currText length  gt  500            var text     this  text              this  text text substr 0  500            alert  You have reached the maximum length for this field

User · Answer

This works on keyup and paste  it colors the text red when you are almost up to the limit  truncates it when you go over and alerts you to edit your text  which you can do   var t2       textarea reference    t2 onkeyup  t2 onpaste  function e       e  e    window event      var who  e target    e srcElement      if who           var val  who value  L  val length          if L gt  175               who style color   red                     else who style color             if L gt  180               who value  who value substring 0  175               alert  Your message is too long  please shorten it to 180 characters or less                who style color

User · Answer

Try using jQuery to avoid cross browser compatibility problems        textarea   keyup function        if   this  text   length  gt  500           var text     this  text              this  text text substr 0  500

User · Answer

I think that doing this might be easier than most people think   Try this   var yourTextArea   document getElementById  usertext   value     In case you want to limit the number of characters in no less than  say  10    or no more than 400              if  yourTextArea length  lt  10    yourTextArea length  gt  400            alert  The field must have no less than 10 and no more than 400 characters             return false          Please let me know it this was useful  And if so  vote up  Thx   Daniel

User · Answer

Quick and dirty universal jQuery version  Supports copy paste      textarea maxlength    on  keypress mouseup   function        return     this  val   length  gt     this  attr  maxlength

User · Answer

onkeydown  if value length gt 500 value value substr 0 500   if value length  500 return false         It ought to work

User · Answer

I have written my method for this  have fun testing it on your browsers  and give me feedback   cheers   function TextareaControl textarea charlimit charCounter       if              textarea tagName toLowerCase        textarea   amp  amp               typeof charlimit     number   amp  amp              typeof charCounter       object   amp  amp               charCounter innerHTML     null                var oldValue   textarea value          textarea addEventListener  keyup  function                var charsLeft   charlimit-parseInt textarea value length 10               if charsLeft lt 0                   textarea value   oldValue                  charsLeft   charlimit-parseInt textarea value length 10                else                  oldValue   textarea value                            charCounter innerHTML   charsLeft            false

[javascript] textarea character limit

Examples related to javascript

Examples related to html

Examples related to textarea

Examples related to cross-browser