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

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>