WNAS

Web developer

jQuery plugin - autotab

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... :)

Technorati Tags: , ,

Rob

Very cool -- but have you found a way to have jquery actually adjust the 'maxlength' value?

2008-08-13 19:26

wnas

Rob, why should you want to do that? I set the maxlength attribute as a parameter when to act.. Please explain...

2008-08-18 05:55

David Chambers

Useful post. I like the way you explained the code rather than simply providing a download link. I'm new to jQuery, and simply needed to find out how to give focus to the next input field.

By the way, using this comment form is unpleasant in Safari on Snow Leopard at the default text size. For some reason the input text is smaller in Safari than in other browsers, making it virtually illegible!

2010-01-21 04:00

farb

Hey,
this is really a very nice plugin - with one elementary error:
if any element is between the inputs (e.g. a
oder a <label>) the whole think doen't work. i've got the same problem in my own script and i tried to fix it for hours, but i can't find a solution.
Any idea?
Greez

2010-09-30 18:02

Marcellus

I had the same problem as farb. If my input fields were separated by and HTML element....I had a BR, it wouldn't give focus to the next input form element. I was able to solve the problem by doing doing the following....replace the if statement that does the length checks with the following....

-------------------------------------
if ( inputlength >= maxlength ){ // if the text is equal of more than the max length
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();

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

-------------------------------------
I think the error comes here....

('input[type="text"]')

I don't know if that is an accurate filter or if 'this' is the form or the element or the document or the sky or the sun or the moon. If it is the element, then getting the .next wouldn't work. And here I am talking about things I don't totally understand.

I do know, that the above correction does work.

2010-10-06 20:26

Rob Juurlink

I changed the code a bit to find the next text input in document order. Code looks like Marcellus's, slightly changed.

if (inputlength >= maxlength) { // set focus to the next text field. var indexNextInput = $(':text').index(inputelement) + 1; window.console ≤ $(':text:eq(' + indexNextInput + ')').focus(); }

2011-02-02 14:48

Rob Juurlink

Today we had an issue with this code. An onChange method on an autotab enabled field never got called. The simple fix was to call the change() method on the field manually, just before where the new focus() is executed.

2011-04-04 15:55

fatih

Go to the previous element when backspace

case 8:
if(inputlength == 0){
$(this).last('input[type="text"]').focus();
}

2011-04-22 08:41

Marco Kleijer

Hey Wilfred, used this script today at a client and had the following issue:
Could you add a semicolon to the of your plugin?
Your script breaks when I combine multiple scriptfiles and pass them to a javascript compressor.

2011-05-23 14:14

Wilfred Nas

I put the code on github, you can find it here:

https://github.com/wnas/jquery-plugins/tree/master/autotab

2011-07-08 10:56

Placeoweb

Wilfred, you should add more keystore to ignore for ignore Arrows (Left, Rigth) when we come back on previous fields for correct like as other Autotab plugin http://www.mathachew.com/sandbox/jquery-autotab/

/**
* Do not auto tab when the following keys are pressed
* 8: Backspace
* 9: Tab
* 16: Shift
* 17: Ctrl
* 18: Alt
* 19: Pause Break
* 20: Caps Lock
* 27: Esc
* 33: Page Up
* 34: Page Down
* 35: End
* 36: Home
* 37: Left Arrow
* 38: Up Arrow
* 39: Right Arrow
* 40: Down Arrow
* 45: Insert
* 46: Delete
* 144: Num Lock
* 145: Scroll Lock
*/

2011-08-31 16:58