title: How can I block further input in textarea using maxlength
body: <p>I have a textarea that I want to block input on if the entered characters reaches a max-length. </p>
  
  <p>I currently have a Jquery script for the textbox that calculates the characters entered and want to add something that will block input in the textarea once 150 characters are entered. </p>
  
  <p>I have tried using max-length plugins in conjunction with my script but they don't seem to work. Help is appreciated.</p>
  
  <p><strong>CURRENT CODE</strong></p>
  
  <pre><code>(function($) {
      $.fn.charCount = function(options){
          // default configuration properties
          var defaults = {    
              allowed: 150,       
              warning: 25,
              css: 'counter',
              counterElement: 'span',
              cssWarning: 'warning',
              cssExceeded: 'exceeded',
              counterText: '',
              container: undefined // New option, accepts a selector string
          }; 
  
          var options = $.extend(defaults, options); 
  
          function calculate(obj,$cont) {
                // $cont is the container, now passed in instead.
              var count = $(obj).val().length;
              var available = options.allowed - count;
              if(available &lt;= options.warning &amp;&amp; available &gt;= 0){
                  $cont.addClass(options.cssWarning);
              } else {
                  $cont.removeClass(options.cssWarning);
              }
              if(available &lt; 0){
                  $cont.addClass(options.cssExceeded);
              } else {
                  $cont.removeClass(options.cssExceeded);
              }
              $cont.html(options.counterText + available);
          };
  
          this.each(function() {
           // $container is the passed selector, or create the default container
              var $container = (options.container)
                      ? $(options.container)
                          .text(options.counterText)
                          .addClass(options.css)
                      : $('&lt;'+ options.counterElement +' class="' + options.css + '"&gt;'+ options.counterText +'&lt;/'+ options.counterElement +'&gt;').insertAfter(this);
              calculate(this,$container);
              $(this).keyup(function(){calculate(this,$container)});
              $(this).change(function(){calculate(this,$container)});
          });
  
      };
  })(jQuery);
  </code></pre>