# Maxlength with jQuery

In this tutorial I will show you how to use jquery.maxlength.js on some common form fields

To start, you will need to download a copy of the jQuery library http://docs.jquery.com/Downloading_jQuery.
You will also have to download the plugin jquery.maxlength.js

- Changelog
- Anon-design.se

When you have downloaded the copy you will need to include it in your file.

    <html>
      <head>
        <script type="text/javascript" src="jquery.js"></script>
      </head>
    <body>
      <!-- we will add our HTML content here -->
    </body>
    </html>

Next step is to include jquery.maxlength.js

    <html>
      <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.maxlength-min.js"></script>
      </head>
    <body>
      <!-- we will add our HTML content here -->
    </body>
    </html>

Now to the fun part, how to apply the functionality to your script.

## Textarea

To use this on a simple textarea

    <script type="text/javascript">
      $(document).ready(function(){
        $('#textarea_1_1').maxlength();
      });
    </script>

## To use this on multiple textareas

To use this on multiple textareas

    <script type="text/javascript">
      $(document).ready(function(){
        $('div.example2 textarea').maxlength();
      });
    </script>

## Textareas

To use this on multiple textareas, with diffrent settings

This textarea has no status indicator, but it has an alert notification

    <script type="text/javascript">
      $(document).ready(function(){
    	$('div.example3 textarea').maxlength();
    	$('#textarea_3_2').maxlength( {status: false, showAlert: true} );
      });
    </script>

## Textareas with triggers

To use trigger your own events (new in 1.0.2)
('keyup' is default and cant be changed)

    <script type="text/javascript">
      $(document).ready(function(){
    	$('div.example4 textarea').maxlength();
    	$('#textarea_4_1').maxlength( {events: ['blur']} );
      });
    </script>

## Textareas with slide counter

To use slider counter on one ot many elements (new in 1.0.3)

    <script type="text/javascript">
      $(document).ready(function(){
    	$('div.example5 textarea, div.example5 input').maxlength( {slider: true} );
      });
    </script>