jQuery plugin - autotab

javascript

26 Jun 2008

Autotab

I recently came across a itch in jquery plugins. They are too well written, with tons of attributes and files to edit in order to configure them. I don't want that, so I wrote a simple plug in just for auto tab.

HTML

The itch was caused by a project where the client wanted three fields for the date and wanted autotab from day to month to year. After that the user should tab himself further... I searched for a plugin as I am a lazy bastard, but the plugins available where too much for me. Some even had me giving id's to the input fields, something that I could not do as they are placed by jsf that generates id's for you. So I wanted a simple solution based on my situation, which is not an uncommon one I think.

I have three input fields on the page, with maxlength attributes so that the user could not enter wrong dates.

<input type="text" maxlength="2 />
<input type="text" maxlength="2" />
<input type="text" maxlength="4" />

As a user would want to have autotab on the page they would have to change the html to have a class of autotab on the input's that he wanted to have autotab, like this:

<input type="text" maxlength="2" class="autotab" />
<input type="text" maxlength="2" class="autotab" />
<input type="text" maxlength="4" />

Note that we need the maxlength attribute to make this work. I will explain later why...

All a user has to do to use the plugin is, include jquery on your page and the plugin, than write in you own code in the document ready function:

jQuery(document).ready(function() {
  jQuery('input.autotab').autotab();
});

Presto you are done, let the script take over and relax.

the plugin

The plugin works like this, first we define that it is a plug in, something that I picked up reading this article.

jQuery.fn.autotab = function (){

Then we set it up to trigger on key up, as we need to measure the amount of code entered after his input.

 jQuery(this).keyup(function(e){

We then set up a couple of keys to be ignored as they only get in the way. For instance, if you let the tab key trigger the function it will not let you enter the field using shift tab. So no undo for you buddy...

switch(e.keyCode){
    // ignore the following keys
      case 9: // tab
        return false;
      case 16: // shift
        return false;
      case 20: // capslock
        return false;

Once we have that sorted, we can decide it is time for action, so we will begin

default: // any other keyup actions will trigger 

First off we read out the maxlength of the targeted element and put it into a variable

var maxlength = jQuery(this).attr('maxlength');
        // get maxlength value

Once we have the maximum of characters, we seek the current amount entered. (here is why we do keyup instead of keydown.)

var inputlength = jQuery(this).val().length;
        // get the length of the text

If the amount of characters is equal or more than the max length

if ( inputlength >= maxlength ){
          // if the text is equal or more
          // than the max length

Set the focus on the next field

jQuery(this).next('input[type="text"]').focus();
          // set focus to the next text field

Enjoy

Go and get the code with comments here or minified, let me know what you think of it...

And thanks for reading this far... :)

← Home