Skip to content

Autotab: jQuery auto-tabbing and filter plugin

Autotab 1.5.5 is OUT! Source files, documentation and demo can now be found on GitHub.

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element. Likewise, clearing out the text field’s content by pressing backspace eventually places the focus on the elements previous target.

Why jQuery Autotab?

  • Auto tabbing behaves logically, in both tabbing forward and tabbing backwards.
  • Allow your users to easily modify your text in a tab that would otherwise auto tab away.
  • Reduce the amount of bad data submitted in a form by filtering text fields.
  • Populate multiple text fields by pasting into one.
  • It is small, fast, easy to load and built on the powerful jQuery library.

Pasting support has basic functionality and has a lot of room for improvement, so use at your own risk.

Comments have been disabled on this page so that any bugs or features discussion can be done on GitHub.

  1. revive permalink

    Can you provide a clear example using the custom regex option, say for a phone number, social or any other combo.. that uses a single input field?
    Thanks and great work on this plugin!

    • Matthew permalink

      I’ve added an example of a regular expression. It’s a quasi IP filter that I never did get working like I wanted with for separate inputs. Here’s the code:

      $('#regex').autotab_filter({ format: 'custom', pattern: '[^0-9\.]' });
      • NRD permalink

        Hi it is great help for me to add autotab plugin in my webbased project.
        I found that when populate the record on the phone numbers then autotab is not work(not moves to another fields there are 2 more txt box)
        Coud help me here asp.

        • Matthew permalink

          I would need to see your example to lend a hand.

      • Fatih permalink

        This code does not work when using masterpage. Can you help

        Code :

        $(document).ready(function () {
        // This example achieves the same result as Step 3 under Basic Usage.
        $(‘#ccno1′).autotab({ target: ‘ccno2′, format: ‘numeric’ });
        $(‘#ccno2′).autotab({ target: ‘ccno3′, format: ‘numeric’, previous: ‘ccno1′ });
        $(‘#ccno3′).autotab({ target: ‘ccno4′, format: ‘numeric’, previous: ‘ccno2′ });
        $(‘#ccno4′).autotab({ previous: ‘ccno3′, format: ‘numeric’ });


        • Matthew permalink

          Do you have a publicly accessible page I can view this? I need more code than you provided because there could be a number of things wrong.

  2. nick permalink

    nice script, covered basic validation and autotab in one.

  3. Gregório Ferraz permalink

    Hello friend!
    Great plugin, great!

    Well, I’m using the plugin with jQuery.MaskedInput and found the following behavior:
    When the field with the mask receives the plugin automatically switches the focus to the next field. How can I remove the mask avoiding the focus internally, while displaying the mask to the user?

    Thank you!

    • Matthew permalink

      Not sure, but this is something for me to consider when I rewrite the script.

  4. Arian permalink

    Would be cool to have an option to set an auto-delay tab…
    like when filling out birthday field like 2/7/1982 (so I have three autotabbed fields where each field is set to simple ‘numeric’ validation)…
    if user enters a single digit like 2 and not two numbers, it would be nice if it autotabbed to the day field after a 2 second delay, and same in that day-field.

    (PS I have date validation via validation plugin after user fills out year field).

    • Matthew permalink

      I can see the appeal in that, but that goes against the normal behavior people when typing into limited text fields. It’s bad enough that many people are not well acquainted with auto tabbing on web forms. To introduce a likely and unexpected action is just as bad, if not worse, as other auto tab scripts that make it difficult for you to make a revision to a field because the character limit has been reached.

  5. Josh Withrow permalink

    $(‘StartDate’).autotab({ target: ‘EndDate’, pattern: ‘^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$’ });

    That should format a date string as “yyyy-MM-dd”, but the format isn’t enforced. Any ideas?

    • Matthew permalink

      I’m not great with regular expressions, but I notice your selector lacks a . or #, so it’s looking for an element by the name of StartDate. I’m sure you’ve got this resolved by now though, since you posted this quite a while back.

  6. Is this supported in jQuery 1.4.3?

    • Matthew permalink

      It has not been tested though it may work just fine.

  7. Dave permalink

    Very Good Stuff!.
    Working in JQuery 1.4.3
    3 thumbs up!

  8. hello, I would be very grateful if you could tell me how to focus the element. When the cursor jumps to the next field the cursor blinks but the input box is not focused. Can this be done somehow?

    Thanks in advance

    • Matthew permalink

      Perhaps I’m not understanding you correctly, but if the cursor is in a text box, then the focus is on that text box.

  9. MrMcQ permalink

    Dude…you rock! Thanks for the great plugin!

  10. Alien permalink

    I keep getting an ‘Object required’ javascript error. I’ve linked jquery-1.4.4.js and jquery.autotab-1.1b.js.

    I’ve cut and paste (using the HTML button) the code as needed.

    Any ideas?

    • Alien permalink

      Forget my above comment. It was a small yet stupid mistake on my part. :^)

  11. Anthony W permalink

    Thanks a lot, did exactly what I wanted extremely easily.

  12. Andre permalink

    Thanks for that great plugin!

    • Matthew permalink

      Glad I could be of service!

  13. Camrat permalink

    Awesome plug in….Nice Work! I am doing an inventory system using barcode readers, so users “blib Serial Number” then auto tab, “blip the RID” then auto tab, “blip the last number…. and I would like it to submit the form once the pre determined length was reached. I am going to take a shot at it with your code, but just thought I would post this to see if I might get a response of the correct way to do it.

    Thanks for the work on this.

    • Matthew permalink

      Accomplishing what you’re describing should be possible without modifying AutoTab. Something like this should work:

      $("#lastFormField").change(function() {
          if(this.value.length >= $(this).attr('maxlength'))

      One of the problems I see with this code is manually modifying what is placed into the text field. As soon as you hit your text limit, the form is submitted, even if there’s a typo. You could extend the .change() function to call an outside extension and check a variable; that variable would start as false and be set to true if a keystroke or click is detected for the last text field.

  14. Thanks for the great plugin.

  15. Danny permalink

    When the focus moves from one element to another, the focusout event doesn’t fire on the old element nor does the focusin event fire on the new one. Any idea why?

  16. amazing and very useful plugin.

  17. furcifer permalink

    what about adding a function/method to have the focus to jump to next input programmatically ?

    for example :

    var $autotab = $(“:input”).autotab_magic(…);
    $(“:input:eq(0)”).focus(); // focus is on the first form element of the page
    var second_input_of_the_page = $autotab.autotab(“next”); // focus is on the 2nd form element

  18. aldumal permalink

    im using another plugin but yours is easier to implement
    but how do i put mask on decimal numbers like this?
    the code works if its exacly 3 whole numbers and 2 decimal, not the 2nd example.
    e.g. 123.3, 95.6

    • Matthew permalink

      A tricky issue to solve. Unfortunately Autotab is meant to handled fixed values, so it makes sense that the first, but not the second, would trigger the auto tab. Off the top of my head, I can think of a way to add a new format, such as decimal, and then specifying the number of decimal places to allow before auto tabbing. This would then work for both examples above, provided that the number of decimal places is specified as one. I’ll have to consider this in my rewrite. If you’re entering weight, for example, then you may want to allow going to the tenth, or hundredth, decimal place. Numbers ending with zero that aren’t entered could cause the auto tabbing to not occur. Definitely a feature to consider though.

  19. Great plugin!

    Heep up the good work!

  20. Sepehr permalink

    Thank You ! It’s Very Useful.

  21. Fred permalink

    It does not look like auto-tabbing is working on iPhone 3 and 4. Should it work?

    • Matthew permalink

      I have no clue, but I’d be willing to accept an iPhone, iPod Touch or iPad to test :D

  22. sarfaraz permalink

    How can use this plugin along with live(). I add few fields which are added after page is loaded.

    • Matthew permalink

      That’s an excellent question. You wouldn’t want to run autotab_magic() as that would effectively double, triple, quadruple, etc. the events, and that would be terrible. If you’re concern is maintaining auto tabbing between input fields, you could do the work manually with autotab():

      // targetName		string name of target element
      // previousName	string name of previous element
      // inputFormat		format of input (text, alpha, numeric, custom, etc.)
      // regPattern		regular expression for custom format
      function addField(targetName, previousName, inputFormat, regPattern) {
      	$('input').autotab({ target: targetName, previous: previousName, format: inputFormat, pattern: regPattern });

      If you’re looking for a more dynamic approach without having to specify precise elements, that can vary depending on the layout of your code, but jQuery’s selectors should be more than adequate to determine what elements are part of the fold. This example has reminded me that I really need to rewrite this script and make it more modular and less prone to awkward implementations for scenarios such as this.

  23. Jeremy Roy permalink


    A great plugin. However I am surprised to see that noone is speaking about a small bug in the code (unless I am missing something).

    To reproduce: The phone field above takes numbers only. If I type ‘a’, it gets deleted and cursor goes back to the first position. However, on the last number if I type a, a gets deleted but the cursor moves to the next input, whereas, the if the letter getting deleted, the cursor should stay in the same input.

    In short, try typing a, 5a, 56a in the first input of the phone field.

    • Matthew permalink

      That behavior sounds likely given that you aren’t prevented from typing characters that aren’t accepted. There are some design flaws in the script and this is one of the things I need to specifically test against when I rewrite the script.

      Wait, what am I saying? You’re typing it wrong!! :P

  24. Jeremy Roy permalink


  25. Frank permalink

    Hi Matthew,
    thanks for putting in all the work. I’ve installed your plugin and it works great in general but it seems to have a small bug (unless I am getting something wrong):

    Lets assume you open a webpage, which already has characters applied to an input field or you typed already something into a field and after that, you go back into this field.
    If you now DOUBLE-CLICK!!! on this field, it selects the whole content. Then you type something until it gets to the next field. In that case that next input field would not be SELECTED, it only gets FOCUS, which is an odd behavier.

    It behaves different though, if you are using the TAB key (instead of double-clicking) on your keyboard. In that case it correctly selects the next field.

    Any ideas how to solve this problem?
    Thanks a mill in advance for your help

  26. samskeyti permalink

    great plugin but i have a problem:

    i write this: $(‘.fieldClassSelector’).autotab_magic().autotab_filter({format:’custom’,pattern:’[^1-5]‘});

    in order to accept only 1 digit from 1 to 5 in a list of consecutive fields.

    what happens is that if i type a digit from 1 to 5 it works correctly. if i type, for example, 7 it deletes the digit from the field (correct, 7 is not accepted) but it tabs to the next field anyway. i want that the focus remains in the field that is still empty.

    did i make a mistake?

    • Matthew permalink

      Sounds like it’s a bug Autotab :-\

    • Jorge permalink

      Hi samskeyti,
      I think I may know what the problem is and how to work it around. I was trying to use your code, and it worked fine for me. Then I tweaked my code until it started behaving as you described. The problem started when I placed the formatting statement before the custom filtering statement, like this:


      If by chance you did the same thing, the solution is obvious – switch the order of statements and/or remove format:’numeric’ – it’s not needed with custom formatting anyway.

      • Thanx Jorge, I had the exact same problem and you solved it ! Prehabs Matthew, you should write something about that.

  27. savita permalink

    It’s works nice

  28. Laura permalink

    Thanks for your work.
    I’m trying this in IE and it’s not working:
    I get the following error messages:
    (works in firefox though)

    Webpage error details
    Message: Object doesn’t support this property or method
    Line: 4821
    Char: 5
    Code: 0

    Message: Object doesn’t support this property or method
    Line: 25
    Char: 264
    Code: 0

    Any ideas how we could make it work in IE.


    • Matthew permalink

      Sounds like there’s a conflict between jQuery and Prototype since you’re getting a prototype error. Have you tried using the script without prototype loaded? This may break other parts of your site depending how how you’re using it.

  29. Jorge permalink

    Thank you for the great work. Could you please give another example of the use of regular expresions? I am seeing that you are using a subset of the common regular expresion functionality. I am trying to build a textbox with direction, like SW, NE, W, etc. In the world of common regular expressions, I would use something like ^[NS]?[EW]?$/i, but it won’t work here. Is there a way to leverage the autotab plugin for that?

  30. Vincent permalink


    I use your (wonderfull) plugin with jquery tools’s tooltips.
    It seams the autotab doesn’t work with the tooltips events onBlur because
    the tooltips stay visible after the switch of input.
    Any idee to fix that ?


  31. Andreas permalink

    Thank you for this great plugin, but I have something to moan about :-)

    As Frank already said, when switching to another field the contents of the field should get highlighted. Just like it gets highlighted when using the TAB key. This does already work in Chrome, but it does not in IE. The destination field only get the focus but the contents is not highlighted.

  32. Ged Byrne permalink

    Stumbled on this when attempting to resolve users pressing ENTER. I didn’t want the form to submit, but I did want the focus to move to the next field. Eventually you’ll reach the submit button where the default behaviour of submitting is adhered to.

    The example below is only for text fields, but it is easily extended for other input types.

    Hope this helps someone.

    $(document).ready(function() {
    $(‘:text’).keypress(function(e) {
    if(e.which == 13) {

  33. Great Plugin, This would be a helpful tweak. Pasting a phone number into the phone field or any correctly formed phrase into a multi part phrase field, and having it all filled in.


    • Matthew permalink

      It’s in the plans, I just have not had the chance to really work on this plugin like I want. It really needs to be redone because the features are poorly implemented when wanting to use them at the same time.

  34. Gabriel permalink

    Great plugin!
    Ged Byrne’s post was very helpful too, but I think he forgot to mention that his code depends on another plugin called jquery.field

  35. ReynierPM permalink

    How I can activate the AutoTab feature with multiples values? I mean I have one field that can have 10 or 13 characters and two are valid options for autotab. Any help?

    • Matthew permalink

      Can the field have either 10 or 13 at any given time or only 10 or 13 depending on another condition?

  36. Jeff permalink

    Alien, I wish you would have posted the “small yet stupid mistake” you mentioned. I’ve gone through everything, but keep getting an error that the function is undefined. I even put in my own function within the autotab.js file just to make sure it was loading correctly.

    The code and examples seem very straightforward, so I must be overlooking something “small yet stupid.” Has anyone else gotten this error when trying to implement?

  37. This looks cool but I am brand new to JavaScript.
    Does this line:

    $(document).ready(function() {

    have other values substitued by the coder.
    or do I actually type the word ‘function’ in?
    If so, how does the code connect the two pieces of code?
    ie: form and JS
    And on 3′: What does initialize ‘ready’ mean?
    thanks – Newbie

  38. zai permalink

    Hi i downloaded your plugin but when i implemented it I got this error on line 257 of the auto tab js file “jQuery is not defined”

    Why do i get that? Sorry, im a newbie into this thing so i dont understand much. Any idea how do i fix that?

  39. Vinod permalink

    Hi Matthew,

    I love this plugin. But I can’t get it working on my iphone (its a html5 project), but the same page works like a charm in the desktop browser. May I ask your help with this? I’m willing to work with you to get this working on the iphone (as I have access to a mac and an iphone). It will be really of a great use if you could pull this off. Thanks a lot.


  40. Vinod permalink

    Thanks Matthew!

  41. Thanks for sharing! Plugin worked great and was easy to set up!

  42. Fantastic plugin. Is it possible to make paste act more intelligently?

    I have a form with several text inputs for entering a code in XXXX-XXXX-XXXX form. If I type the code then autotabbing between the inputs is fine. But, if I paste a long text string, it fills the first box then stops.

    Is there a way around this?


    • Matthew permalink

      I plan to include this when I rewrite the plugin, and hopefully that will be soon.

  43. Mike Jongbloet permalink

    Any further news on the above ‘intelligent paste’ being added.

    Plugin is great – this function would make it perfect.

    • Matthew permalink

      Only that it’s in the plans for my next update. No eta on when the next version will be available, unfortunately.

      • Mike Jongbloet permalink

        Glad you’re still considering adding it. I attempted expanding your plugin myself but didn’t get very far!

        In the meantime, have you come across any jquery plugins that provide this functionality?

        • Matthew permalink

          Waaaaaaay overdue on this response.

          I haven’t explored it much, but I do recall the Xbox site supporting smart pasting for key codes. I haven’t entered one in a while, so it may have been changed into a single input field, but it’s worth checking out. There’s bound to be something that can do it.

  44. Maicon Voltolini permalink

    Dont work with live() event. Any idea?

  45. kotei permalink

    I want to know when you say jquery.autotab-1.1b, if the “b” is a beta version or another notation.

  46. bunny permalink

    Firstly, thank you for developing this plug-in!

    I was hoping to have: autotab_filter(‘email’) available as a standard feature, but it appears as if you have not rolled that functionality in yet. I’m trying to implement it on a form that I am working on, and I entered the following:


    Console log is complaining:
    invalid range in character class
    var pattern = new RegExp(defaults.pattern, ‘g’);

    The RegEx statement I copied from another project that uses a javascript ReEx test, so I know that it’s valid.

    Any clues? :)

    • bunny permalink

      p.s. I also tried it without the preceding and trailing backslashes and got the same error.


      And, congrats on the new-born!!!

  47. Víctor Hernández permalink

    Hi! It’s a great pluging!

    Help me! How can I do that autotab works well when some input text is disabled.

    For example: I have 5 input text in my form, but the input text 3 is disabled, when i finished to write the input text 2 the autotab don’t work. I need that the input text 3 has the focus.

    Thank You!!!

    • Nirmal permalink

      I have the similar issue. There are some inputs in the form that are dynamically disabled based on selections on other inputs.
      When autotab script encounters such a disabled input, it does not continue to autotab on the next input that is enabled.

      Still looking for a solution for skip to next enabled input when encountered a dynamically disabled input

      • Matthew permalink

        Surprisingly I hadn’t considered dynamically added or enabled text fields. That’s something I’m going to have to factor into my 1.2 update.

  48. Warren permalink

    I have a page with more than one firm with the same element names. Call them form1 and form2 each of which has field1 and field2. How do I format the ready function to work with both sets of fields?

    • Matthew permalink

      If you don’t want the forms to be connected through autotabbing, you could apply the autotab rules to each form separately through a selector that narrows down the results. I could offer more help if the form can be seen.

  49. Santhosh T G V R S permalink


    This is great..

    But, can this plugin be extended to do auto-tab based on tabIndex(now i need to include all elements in jquery selector) and also to support selectboxes (i.e once i select an option in select, it should autotab to next field) as well.

    • Matthew permalink

      I’ll have to give the tabIndex option some thought since it’s currently basd on the order they appear in the selector. The select box option sounds good, for now, so I’ll keep that in mind in the 1.2 update.

  50. Very useful & powerful script. Thank you. I do, however, have an issue with users holding the backspace to erase input values. It triggers a history.back() event.!

    • Matthew permalink

      You’re welcome! Odd about the history issue, but that doesn’t happen on my examples above. If the focus is on a non-editable field, hitting backspace would trigger that.

  51. Gaston permalink

    Thank you! Great Plugin!

  52. Payton Jass permalink

    I’m trying to setup validation on a field that is ‘alpha’, but doesn’t remove the spaces of text once it blocks out numeric values. For instance, “Dave Smith2″ will change to “DaveSmith” when a number is added. I tried setting nospace:’false’ and that didn’t work. Thanks! Great plugin btw!

  53. Lewis permalink

    I really like this functionality… however, in my case, to be able to use it, I would need to know if it’s possible to set a timer in which the auto tab is performed… example:

    In a scoring table form…
    I want to set the custom values to: 1,2,3,4,5,6,7,8,9,10…

    The problem is that in the form those characters should be an option for every field… however the max length should then be TWO (2) characters, but then if someone ONLY WANTS A SINGLE CHARACTER VALUE in the field… it won’t autotab, cause there is still one character missing to reach the pre-set max length.

    Any ideas?

    Thanks in advance,


    • Matthew permalink

      That’s a tricky problem. Let’s say you monitored for 2 through 9 and autotabbed on that. That’s fine, but when pressing 1, how will it know you’re intending the value to be 1 or 10? You could do a timer, but what if they’re too slow to press 0 or are pressing non-numerical keys? That’s just introducing too many layers of what ifs to account for.

  54. Hi Mat,
    I wish I could filter an input text for decimal value. Which code I should use ?

    • Matthew permalink

      Apologies on the very late response. Have you tried a custom regular expression? [^0-9\.]+ should remove everything but numbers and a period. I say should, but haven’t tested it, go figure :D

  55. derek permalink

    Hi there,

    Just a question about this auto tab script. I am using it with a phone number, but I have the area code pre-populated, and the cursor starts in the second box. But if a person wants to change the area code, they should be able to just backspace, and delete the area code to put in a different one. However, when you backspace to a field that is pre-populated, the cursor goes to the beginning of the area code field.

    If you type the area code, and it auto tabs to the next box and you continue typing, then backspace all the way, it works great. It’s just a problem with the area code field has a value to start.

    Any ideas?
    Thank you

    • Matthew permalink

      Backspacing from the second to first input shouldn’t vary depending on how you got to that point, so I’ll have to play around with this situation to isolate the problem.

  56. derek permalink

    just to add… it does work in Safari, but not in Firefox. (backspacing through pre-populated area code field)


    • Matthew permalink

      I’ll be sure to give that a look when I do the rewrite, whenever that will be (hopefully in the next few months, but don’t hold your breath).

  57. derek permalink

    Also, any ideas on how to make auttoab work on iPad? (safari mobile)

    • Matthew permalink

      Sorry, not at this time. I have an iPhone I can try to test it out with, but I currently lack the time.

  58. Hey – I love the plug in but can’t get it to work with ASP.NET master pages because of the naming conventions.

    The fields are:


    And this code causes a jquery error:

    $(‘#CPH1_Student1PhoneNumber1′).autotab({ target: ‘ctl00$CPH1$Student1PhoneNumber2′, format: ‘numeric’ });

    Is there a way to target a field by ID instead of name?

    • Matthew permalink

      Yep, just pass the jQuery selected object: pass $(‘#CPH1_Student1PhoneNumber2′) instead of ‘#CPH1_Student1PhoneNumber2′

  59. zxprince permalink

    Thank you so much…. really a great plugin … thank you again

  60. Richy Hicky permalink

    Thanks very much for this it’s great

  61. Wade permalink

    I was having an issue with hidden inputs and the plug in… here’s what I did to fix it… feel free to use it if you like:

    $.fn.autotab_magic = function(focus) {
    for(var i = 0; i < this.length; i++)
    var n = i + 1;
    // make sure the next target is visible
    while (!$(this[n]).is(":reallyvisible") && n < 0){

    if(i > 0 && n < 0)
    $(this[i]).autotab({ previous: $(this[p]) });
    $(this[i]).autotab({ target: $(this[n]) });

    // Set the focus on the specified element
    if(focus != null && (isNaN(focus) && focus == $(this[i]).attr('id')) || (!isNaN(focus) && focus == i))
    return this;

    • Wade permalink

      I forgot to mention… you have to add the definition for reallyvisible…

      // this should determine if a field is really visible
      jQuery.expr[ ":" ],
      { reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}

    • Matthew permalink

      Thank you, I don’t know why I didn’t think of hidden fields. These can be passed over with a selector, but perhaps the script should share the responsibility of handling those.

  62. Vardhana permalink

    HI, Autotab is not working on iphone and Android

    can someone please help me? Apprecaite it THX

  63. Kam permalink

    In the phone number demo, if you type alpha characters really quickly then it auto tabs to the next box even though the characters are removed since they are not valid… guessing it is only part of the plugin kicking in before the other has finished… admittedly not something very likely to happen in real life situation… but kind of thing that our QA team will pick up!

    • Matthew permalink

      Oh man, don’t I know that to be true (the QA part), and it irks me all the time! I am aware of this and will have the script prevent illegal characters from appearing when I next update it. It’s one of many things I plan to address. Thanks for the info!

      • Kam permalink

        I managed to persuade QA that it was a stupid requirement since if someone wanted to be malicious then they would just turn JS off, and the fact it does actually remove the text will fail validation anyway. So happy days. Great plugin, love the tab back on delete functionality too.

  64. I want to remove the numeric filter on onchange event of the dropdown. How could i do it?

    Please help

    Thanks in advance
    -Vaibhav C

  65. OMG it works so perfectly, you saved me a bunch of code, thanks so much and have a great day!

  66. Very nice application, thank you for sharing.
    Have a nice day…

  67. Martin permalink

    Hi Matthew

    Great plugin.

    Is there any way to do something like this:
    jQuery(‘input’).autotab({target: jQuery(this).next(‘input’), previous: jQuery(this).prev(‘input’)});

    Thanks, Martin.

    • Matthew permalink

      You wouldn’t have access to this within the object being passed to .autotab(). You could do $('input').autotab_magic() so that only inputs are used, that way the previous and next inputs only are in the selection.

  68. Good plugin.
    It help me so much.

  69. Deza permalink


  70. Very good Script. I can use in my website for job classifieds! :) Thank you! :)

  71. Michael Q. permalink

    Like another user I have a form that dynamically enables/disables input fields. How can autotab be modified to skip over disabled fields?

    • Matthew permalink

      The only way to make it happen today is the manually set each field. A pain, I know. I hope to address this on the next update, whenever that will be.

  72. silambarasan permalink

    Thank you for ur help

  73. Ian Budden permalink

    Love the plug-in. I have a modification for ‘selecting all’ when you go to an input – have you thought about putting the plug-in on Github? Then I can fork it…

    • Matthew permalink

      I am working on Autotab 1.2 and will probably put it on github when I am ready for people to test it out. Thanks for the feedback!

  74. Eddie permalink

    Has anyone observed issues in IE8? I’m getting Object doesn’t support this property or method errors in IE8 using this line:

    $(‘#BusinessPhoneAC’).autotab({ target: ‘BusinessPhone1′, format: ‘numeric’ });

    • There are some IE8 issues in the code.

      Feel free to download my edited version, which works in IE8 -

      - or run the original through for a read out of the errors.

      The majority of the jshint errors don’t matter, but there was a missing semi-colon and a few other traits that break IE8.

      Also, I have no idea when you originally wrote your comment as matahchew has hidden the dates for some reason!

      Good luck anyways. Niall

  75. I am trying to get this script to work on my wordpress install:

    I cannot get it to work! can you help!?!
    I see you are using it on wordpress..
    I put the script in my theme header
    I called the id’s to my form fields
    still its not working!
    Can you help? I am also interested in turning this into a wordpress plugin, please e-mail me and lets discuss that! Thanks for your help!


    • Matthew permalink

      You have a JavaScript error on line 70, where <!-- is being encoded to &lt;!--. It’s also happening on the closing: //--&gt;

  76. I looked at the javascript, I am debugging in firefox with firebug (used doing css, fairly new at the js debugger) I changed line 70 and copied your example code exactly, still can’t seem to get it to work… maybe its an issue with the 2011 WP theme? I’d like to get this plugin working and also, as I mentioned, I think this would make a great wordpress plugin and would be willing to contribute time to get the wordpress plugin created.

    • Matthew permalink

      There’s still an issue. You’re jQuery script calls noConflict(), so replace $ with jQuery and you should be good to go. Also, the textboxes are larger in Chrome and the last field is on a separate line.

  77. Worked Perfectly! Thanks man, yeah I’m still working on the css.. trying to get core functionality done first.

    I really like your script! I’m going to work on writing it into a wordpress plugin that inserts the js automatically for easy integration!

  78. Hey Matthew

    Once again, thanks for the great plugin!

    Here is an easy configuration for this plugin I have created where an element of the plugin can be integrated by setting an id for that element:
    for example if you want numeric you just set the input id=”numeric”

    However, I was thinking this script could be even easier to integrate if you changed the trigger value from “id” to “class” and have the script effect inputs with that class. The reason for this is that you are allowed to have multiple values in class for example class=”numeric uppercase” This would allow a user to easily set whatever options they want without having to change the script for each custom element.

    Let me know what you think about this idea.

    Here is the example code I put together below:

    jQuery(document).ready(function() {
    jQuery(‘#uppercase’).autotab_filter({uppercase: true});
    jQuery(‘#lowercase’).autotab_filter({lowercase: true});
    jQuery(‘#nospace’).autotab_filter({nospace: true});
    jQuery(‘#uppercase’).autotab_filter({uppercase: true});

    • Matthew permalink

      Not a bad suggestion, though I want to avoid confusing myself with the numerous ways to apply the autotab script. Still, there’s merit to it.

  79. Sorry I posted the wrong code, here is the code with the elements effecting the “class” and not the “id”
    notice I changed the # to a . to affect the class.
    So far works great! Now I want to make a simple plugin that simple inserts the javascript via a wordpress plugin and documentation to explain how to add the class elements to Contact Form 7 for easy integration.

    Great Plugin again! You rock dude!

    jQuery(document).ready(function() {
    jQuery(‘.uppercase’).autotab_filter({uppercase: true});
    jQuery(‘.lowercase’).autotab_filter({lowercase: true});
    jQuery(‘.nospace’).autotab_filter({nospace: true});
    jQuery(‘.uppercase’).autotab_filter({uppercase: true});

    • Matthew permalink

      Thanks for the suggestion and compliments! The next version of Autotab will support any selector that is passed and will be more effective at filtering than 1.1b is. I was hoping to have it out by now as I have rewritten most of it, but I wanted to add some new features. I may have to hold off on that just so that I can get a better version out sooner. Thanks again!

  80. praveen permalink

    Will this plugin work for autocomplete and listbox components

  81. Nice work Matthew.

    This little gem helped me out considerably and will make our user experience that much more polished.

    Thanks for sharing!


    • Phil permalink


      I got your plugin working and it is a beautiful thing! Thank you!


  82. Chris Emerson permalink

    This is nice, but I have a couple of suggestions.

    1. Ignore the first press on the ‘tab’ key after auto-tab has done its stuff

    For example, in the case of your examples where you have 3 fields, I fill out the first field and automatically press ‘tab’ to move on to the next field. This is because I am used to it, it is how every other form on the web works, and nothing on this form would suggest to me that it would happen automatically (even if it did say that, it’s an automatic thing with me!). When I do this though, I’m suddenly moved onto the last field, so miss out the middle one completely. It should ignore the tab key I pressed (as it has just replicated the behaviour anyway), although if I did want to tab to the last field it should allow me to do that by pressing tab again – only the first press should be ignored.

    2. Smart pasting

    If I copy the string ’123456789′ to my clipboard, put my cursor in the first field and press ctrl-v (or paste), it fills the first field with the first 3 numbers, tabs to the second field and stops. Is there a way to get it to continue pasting the numbers across the 3 fields? Microsoft do this I think with their product keys, and it’s really smart and very usable.

    Nice plugin though! I’ll keep my eye on it.

    • Matthew permalink

      1. My 1.2 beta accounts for this. I think you’ll be pleased with it.

      2. Already on my list, just a matter of actually working on it. Arg!!

      • Chris Emerson permalink

        Awesome, can’t wait for these updates :)

  83. Amine permalink

    i have a field to put the day number .. for that matter i’ve done this
    $(‘#day’).autotab_filter({format:’custom’, pattern:’0[1-9]|1[0-9]|2[0-9]|3[01]‘});
    and it’s not really working .. i’ve tried all the regexp patterns on internet .. and it doesn’t work .. i want the field to allow only numbers between 01 and 31 for the day field .. please help !

    • Matthew permalink

      That’s probably due to the way custom patterns are handled. Whatever is matched is removed, but unless my memory is bad, ^ should denote whatever doesn’t match the pattern should be removed, so ^0[1-9]… should, in theory, remove everything that’s not between 01 and 31. That said, you might want to use the function format and provide your own logic.

  84. GREAT PLUG-IN! Many thanks.

  85. Phil permalink


    Thanks for the excellent plugin and writeup. Unfortunatly I am having a problem. I trying to use your plugin in a JSP built on Spring, if that matters.
    Eclipse is complaining about 4 issuues. The first is at line 208
    “return $(this).bind(‘keydown’, function(e) {”
    It wants me to add a closing paren to complete arguments. I think the rest may solve themselves once I solve the first complaint. Thanks

    I am using jQuery v1.8.2 is that compatible?

    Thanks again.


    • Matthew permalink

      It should be compatible, but I haven’t fully tested it against newer versions for quite some time. I’m doing a terrible job supporting this plugin. According to a quick test in jsFiddle, it is compatible.

  86. Lyon permalink


    im new for js.i used onkeyup=”ready()” for my text feld but in not work.pls help

  87. Lee Kowalkowski permalink

    Why are any of those fields not just one field? To be accessible, every text input must have a meaningful, visible label – therefore, they should just be one single field.

    If you want the formatting (the hyphens), then work on a plug in that can format the text as you type, rather than auto-tab.

    Auto tab plugins should also detect when the user is pressing tab (out of habit, naturally) and if it looks like they did, suppress it. It’s very difficult to get the user experience right without breaking somebody’s workflow.

    My bank’s website used to do this, but thankfully they were persuaded to remove it.

    • Matthew permalink

      Thanks for the input Lee. I created the autotab script to work in scenarios where people did not want a single field for typed values. Scripts such as the Masked Input Plugin make the format as you type option appealing, quite useful and easy to use. However, not every application calls for that, hence the autotab option.

      I have a beta version of 1.2 sitting on my laptop that does suppress the input when tab is used when auto tabbing occurs. I just have not put aside the time to finish the update. I also plan to support pasting. It’s really about timing where every day life and other projects make getting this update done difficult.

      Thanks again for the input.

  88. Darren permalink

    This plugin works great, except for the issue where it appears to check the length before applying the regex filter, which causes it to advance prematurely.

    For example, I have an input box with accepts 4 HEX characters, so if the user enters AAAZ in the first box, the plugin will tab to the 2nd input, leaving only ‘AAA’ in the first box. Ideally it would check the length after applying any filter.

    Is there a newer version of the plugin which addresses this issue? I’m pretty sure that this behavior will create user complaints if I add it to our site….

    • Matthew permalink

      The next version will hopefully address this issue. I haven’t touched it in months, but I believe I was able to get it to prevent any unwanted characters from appearing completely, unlike the current iteration that shows the character and quickly removes it.

  89. Jørgen Østensen permalink

    Is it possible to jump to next field normally when length is 1 except when the typed char is 1 then it should not jump before another char is typed?

    So one should jump when the field is 0,2,3,4,5,6,7,8 or 9 , but not on 1 where it should wait for more input like 10,11,12,13 ……

    • Matthew permalink

      It is, but you would have to prepend a zero so that the maxlength is reached and forces the autotab. There may be a catch with different browser behavior for prepending the zero, but you can accomplish this by setting format to custom and passing a function in the format parameter that will return the appropriate value.

  90. Luca permalink

    On the iPad, the keyboard closes after a field is full.

    • Matthew permalink

      I’ll look into this. Hopefully an old iPhone 3GS I have lying around will be sufficient to test this.

      • Matthew did you ever find a solution for this? I can’t seem to find a way around the keyboard closing after each auto tab.

        • Matthew permalink

          I just released Autotab 1.2 on GitHub. Part of my changes includes improved behavior on iOS, Android and Windows Phone platforms, though I admit my testing wasn’t nearly as thorough as it typically is. Hopefully I’ve addressed the issue, and if not, please submit an issue on GitHub!

  91. Manny permalink

    Please Help…….. I’ve got this piece of code here:

    and under the script section:

    function ExecuteOnLoad() {
    $(‘#area_code’).attr(‘maxlength’, ’3′);
    $(‘#number1′).attr(‘maxlength’, ’3′);
    $(‘#number2′).attr(‘maxlength’, ’3′);
    $(‘.test’).autotab({ format: ‘numeric’ }).autotab_magic();

    function changeLength() {
    $(‘#area_code’).attr(‘maxlength’, ’5′);
    $(‘#number1′).attr(‘maxlength’, ’5′);
    $(‘#number2′).attr(‘maxlength’, ’5′);


    $(‘.test’).autotab({ format: ‘numeric’ }).autotab_magic();

    the auto tabbing works fine but maxlength remains limiting the textboxes to 3 although i dynamically being changed… the browser caching the old ‘maxlength’ attribute value these textboxes this is a cool plugin if it could just do this for me

    • Matthew permalink

      Unfortunately this is due to poor coding on my part. You can try unbind() for both keydown and keyup when calling changeLength().

  92. Sam permalink


    Hitting Ctrl+A in an input that is filled to it’s full length to copy the contents of that input causes the focus to jump to the next input which is very annoying. Double click helps for inputs with only one word but for multiple words its very hard to copy the contents from that input. Can you look into this matter?


    • Matthew permalink

      Yep, I’ll look into it. Should just be a matter of checking if the ctrl key is pressed, which jQuery passes that info along, though I’m not 100% certain on the browser compatibility. Still, I will work on a fix.

  93. wribeiro permalink

    There is a way to solve the problem below?

    When i´m editing a textfield at first position, if I type a character lower case, it become upper case and the cursos goes to the last position.

    function upper(id) {
    $(document).ready(function()) {
    {format: ‘all’, uppercase: true});

    • Matthew permalink

      A couple things I want to point out. If you’re applying the filter through a function, you don’t have to call $(document).ready(). Second, your code is invalid with $(document).ready(function()), notably the last parenthesis. Finally, you’re telling the filter to convert the lowercase letters to uppercase, so if that’s what’s happening, then it’s working as intended.

      I need some clarification on ‘the cursor goes to the last position.’ Can you provide a link to the page or setup an example in jsFiddle so that I can see what the problem is? Thanks!

  94. wribeiro permalink

    I created a example in
    In textfield, type a word, “test” for example. The filter will format it, then put the cursor on the first position (before first t) and type a letter. The filter will put the cursor on the last position.


    • Matthew permalink

      I see what you mean. Great news, though. My 1.2 update fixes this, so you can expect it soon. I’m going to make a concerted effort getting 1.2 out in the next two months, maybe three, possibly four, but I hope not five…

      • krupa permalink

        Hi Mattew,

        This is Krupa,

        When i´m editing a textfield which i have entered previous, if I type a character lower case, it become upper case and the cursor goes to the last position.

        could you help me how to solve?

        • Matthew permalink

          I’m not clear on what you’re describing. Are you typing in the middle of the text and then it’s auto tabbing to the next textbox? If so that sounds like it’s behaving as intended because the maxlength has been reached.

  95. anil permalink

    Nice tool, please let me know is there any way to add tab property in inline design instead of writing in document.ready event.

    • Matthew permalink

      Without using jQuery or just not when the DOM is ready? You could call a function that would apply the autotab script. I’ll consider releasing a version of autotab for other frameworks and even as pure JS, but it may be a while before I am able to get to it.

  96. Stanley Martin permalink

    Before I dig into this too deep, I was wondering if this would be able to perform this function. I host a golf league website and to input scores I would like to use this plugin for that. If the first character of the input field is a “1″, do not autotab, but if it’s any other number, then autotab to the next input field. Any thoughts on that?

    • Matthew permalink

      It’s possible using the custom feature, but the issue you’re going to run into is if you also need to support values over 9. Please see this comment and my response. The main concern is an inconsistent behavior for autotabbing, where you are probably going to force the user to press their tab key when they type 1, but not for any other number.

  97. keevin permalink

    Hi Matthew,

    Thanks for the great code.

    Am having the object expected error which point to $(document).ready(function().

    Quite a lame error, any help will be much appreciated

    • Matthew permalink

      I can help, but I need to see the code.

      • keevin permalink


        $(document).ready(function() { $(‘#area_code, #number1, #number2′).autotab_magic().autotab_filter(‘numeric’); });

        Phone Number:

        • keevin permalink

          I literraly add the link to the JS file, copied the above html code along with the script to

          • Matthew permalink

            It help be more helpful to post a link to a page rather than the html code, because a lot of what you’ve pasted has been stripped out.

  98. keevin permalink

    HI Matthew

    Am using the basic code


    $(document).ready(function() { $(‘#area_code, #number1, #number2′).autotab_magic().autotab_filter(‘numeric’); });

    Phone Number:

  99. devyab permalink

    Hi, thanks a lot for this article, it helps a lot.
    however, i have a little problem, this script works when we Initialize Autotab with a ready() handler. In my case, the user create inputs dynamically by cloning a given form, that means that i don’t know beforehand the id of all the inputs !!!

    can you help please.


    • devyab permalink

      i think i’ve found the answer, i use this :

      $(‘input[id*="area_code"], #number1, #number2′).autotab_magic()

      and i know that my inputs contain ‘area_code’

      • Matthew permalink

        There are quite a few selectors at your disposal to select the inputs when they’re added or removed, but if the above works for you, then great!

  100. Chris permalink

    Nice plugin.

    However, I’ve noticed that sometimes when I type too quickly, autotab will skip a field when their default value equals the maxlength.

    I think it has to do with the fact that one of my fingers holds down the ’2′ key, a fraction of a second too long for example, when entering ’12′ into a maxlength=2 field.

    Where in your code could I put in a delay to account for this?

    • Matthew permalink

      I am aware of this issue and I believe I have addressed it in v1.2. I really need to get this out sooner rather than later because it’s a significant upgrade over 1.1b. If I remember correctly, I got around this by using the keypress event instead of keyup.

  101. Alan permalink

    I am still seeing an issue with the backspace key being used when the focus is on a radio button. If a user presses the backspace key on the radio button, the browser navigates back. Will the use of the previous attribute prevent this issue?

    $(‘#radio-id’).autotab({ previous: ‘previous element to radio group’ });

    • Matthew permalink

      I hadn’t come across that before, but I know I can make it happen.

  102. First thanks for this!

    I am creating a little quiz webapp. Most answers are generally single character alphanumerics. One the rare occasion a user has a fill-in-the blank answer, I want the user to be able to use the space bar to trigger a popup text entry allowing them to enter the longer answer in the field.

    Any ideas how I might go about that? I know javascript code for creating a popups, but, I am wondering where to put the function and how to deal with the fact that my maxlength changed when the popup is triggered).

    Here is an example of the page as is now (unable to accept spaces).


  103. Bob permalink

    I am using this for a bar code scanner… I am doing a Grid Add so adding 25 new records at at time… when I get to the last scan how do I get it to tab to a new line? My fields are basic, SN# tabs to Assettag than I need Assettag to tab to a new line but land in the SN# so the loop starts over again. HELP!!!

  104. _FOo permalink

    You are awesome! Thank you.

  105. Gabriel permalink

    I have a suggestion: when pasting a large number, and the plugin should break automatically populate. For example, if I paste 7891230123 (or 789-123-0123) in the phone, the plugin should automatically fill in the three fields.

    • Matthew permalink

      I just released Autotab 1.2 on GitHub. This new version includes basic pasting support, so phone numbers will get inserted cleaning, but there is an exception. My method of breaking up the content is rather crude and poorly handles repeating characters. I’m working on improving this because I am unhappy with the result. It works best in ideal circumstances, but it definitely needs to be improved to handle less than ideal ones.

  106. Nemanja permalink

    Why this regexp whant work? It show me oposite result.
    $(document).ready(function() {
    $(‘#sati’).autotab_filter({ format: ‘custom’, pattern: ‘[01][0-9]|[2][0-9]‘ });

    It works for more than 24!

    • Matthew permalink

      You want the value to be between 0 and 24? Send me a message on the Autoab GitHub project so I can help you out with this.

  107. Thank you so much

  108. This is a great plugin! I was actually writing my own — greart learning experience — when I stumbled upon this. Why reinvent the wheel, right? What is the licensing for this plugin?

    I would love to see .preventDefault() used somehow with the filter instead of val.replace(). That way the character just won’t be typed out at all. Also, I believed the preferred way to bind to an event now is to use the .on( events [, selector ] [, data ], handler(eventObject) ) event handler.

    • Matthew permalink

      I just released Autotab 1.2 on GitHub. Part of my changes includes replacing keyup with keypress, allowing me to prevent any unwanted characters from appearing. I’ve also updated it to support jQuery 1.7+ and 2.x, levering both custom events and the .on() event handler.

  109. Todd permalink

    Any suggestion to have it detect the character count not on keyUp, but as a character is added?

    I’m using an onscreen keyboard to add characters to the field. So keyUp detection won’t work for me.

    Thank you

    • Matthew permalink

      I just released Autotab 1.2 on GitHub. Part of my changes includes no longer using the keyup event. I’ve also tested it on an iPhone, Android and Windows Phone. The behavior is mostly acceptable, with iPhone and Android allowing me to filter the value without showing unwanted characters.

Trackbacks & Pingbacks

  1. jQuery AutoTab Plugin « Jquery Labs
  2. Code snippet » 8 ciekawych i przydatnych pluginów do jQuery
  3. Ultimate List of jQuery Plugins You Should Use on Every Website | Web Designer Aid
  4. Ultimate List of jQuery Plugins You Should Use on Every Website « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  5. JavaScript and jQuery: The workflow | Web
  6. 方山子的博客 » 24个实用的 jQuery 插件
  7. 分享24款非常有用的 jQuery 插件 « minvision
  8. [转] jQuery插件分享 | 1个饼
  9. Share of 24 very useful jQuery plugin
  10. 80+ AJAX Resources, Downloads, and Tutorials |
  11. Autotab: jQuery auto-tabbing and filter plugin For TextBox
  12. 分享24款非常有用的jQuery插件 | 想来网
  13. JQUERY « prubman
  14. 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag
  15. jquery 表单插件 | 耀然程序世界
  16. 12 个必要的 jQuery 表单插件 | 极地 EA163
  17. 12 ciekawych pluginów javascript dla formularzy | Darmowe skrypty, grafiki dla webmastera!
  18. 20个jQuery插件-帮你打造完美网页表单 | 智果实验室
  19. 20个jQuery插件,帮你打造完美网页表单 | 松鼠博客
  20. iGuoguo 爱果果酷站 » 20个jQuery插件,帮你打造完美网页表单
  21. 12 Essential Javascript Form Plugins | CollegeGFX | CollegeGFX
  22. 【转载】12个必要的jQuery表单插件 | 龟仙岛
  23. 推荐12款JavaScript表单插件 » Gso 积累
  24. 代码例程:12个基本的JavaScript表单插件 | 1freehost
  25. 20个jQuery插件,帮你打造完美网页表单 | IT储备网
  26. 15 jQuery Plugins for Simple & Effective Forms User Interface | Blog for designers web developers bloggers freelancers SEO
  27. 15 Plugins y tutoriales jQuery para mejorar tus formularios
  28. 12款漂亮的JavaScript表单插件 | EC-CODE - 又一个 WordPress 站点
  29. jQuery表单插件,插件不在多,在于精! | 引领人生
  30. 12个必要的jQuery表单插件 | Jony's Blog
  31. jQuery Wordpress Plugin - Form Input Auto Tab and Input Validation works with Contact Form 7
  32. Autotab: jQuery auto-tabbing and filter plugin » imLuxin
  33. 20个jQuery插件,帮你打造完美网页表单 – 90互联网数据中心
  34. 13 Effective Free jQuery Plugins that Enhance Your Forms | Free and Useful Online Resources for Designers and Developers
  35. Can you add jQuery that forces ‘tab’ based on chosen delimiter in a copy/paste to HTML form? |
  36. 10+JavaScript表单插件 : 免费资源分享站
  37. 10+ 十分实用的 jQuery表单插件 : 免费资源分享站
  38. 四五外包 » 10个超棒的jQuery/JavaScript表单插件推荐
  39. 四五外包 » 20个jQuery插件,帮你打造完美网页表单
  40. 10个超棒的jQuery/JavaScript表单插件推荐 - MAC APPS - 苹果应用荟萃 -
  41. Autotab – jQuery plugin for auto-tabbing and filtering | EasyjQuery - Tips, Tricks, and API for jQuery
  42. 分享24款非常有用的 jQuery 插件 | 田淏予博客
  43. 推荐12款JavaScript表单插件 | 小Z的博客
  44. Best Free jQuery Form Plugins to Improve User Experience - Treehouse Blog
  45. ZAW Consulting – Best Free jQuery Form Plugins to Improve User Experience
  46. Best Free jQuery Form Plugins to Improve User Experience | Html5 Tutorials
  47. Best Free jQuery Form Plugins to Improve User Experience | IT Swapps!!
  48. 提升用户体验的最佳免费 jQuery 表单插件_Uncategorized-安小龙的个人博客
  49. Best Free jQuery Form Plugins to Improve User Experience | InfoLogs
  50. 提升用户体验的最佳免费 jQuery 表单插件 – 斯通麦博 WEDN.NET
  51. 提升用户体验的最佳免费jQuery表单插件 | 风流三月1
  52. 提升用户体验的最佳免费jQuery表单插件 | Cov Team's Bolg
  53. How would i build a 3 field phone number field with rails? - |
  54. 15 jQuery Plugins That Enhance Your Forms

Comments are closed.