Autotab: jQuery auto-tabbing and filter plugin
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. NOTE: I still have all of the feedback I have received when my site was running Drupal. When this script moves past 1.1b, I will do my best to incorporate many of the suggestions given.
Why jQuery Autotab and not some other auto-tab script?
- Auto-tabbing behaves logically, in both tabbing forward and tabbing backwards.
- It allows you to easily change your text in a tab that would otherwise auto-tab away.
- It can filter text fields, ie. restrict a phone number fields to just numbers.
- It’s small, fast, easy to load and built on the powerful jQuery library.
Download
jQuery Autotab Plugin v1.1b (1872692)Demo
Basic Usage
This example provides the benefit that you have less HTML, but the drawback is that you have to modify your selector and specify the maxlength of the field. Six here, half a dozen there; it comes down to preference.
- Include jquery.autotab.js in your HTML:
<script type="text/javascript" src="jquery.autotab.js"></script>
- Add your text fields in your HTML, including an ID:
<form> <div><strong>Phone Number:</strong></div> <input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> - <input type="text" name="number1" id="number1" maxlength="3" size="3" /> - <input type="text" name="number2" id="number2" maxlength="4" size="5" /> </form>
- Initialize Autotab on your text fields with a ready() handler:
<script type="text/javascript"> $(document).ready(function() { $('#area_code, #number1, #number2').autotab_magic().autotab_filter('numeric'); }); </script>
Advanced Usage
.autotab_magic()
Automatically assign tabbing rules to all selected elements.
Example
<script type="text/javascript"> $(document).ready(function() { $(':input').autotab_magic(); // OR $('#area_code, #number1, #number2').autotab_magic(); }); </script>
.autotab_filter(string)
Apply the specified filter to an element.
Example
<script type="text/javascript"> $(document).ready(function() { $('#area_code, #number1, #number2').autotab_filter('numeric'); $('#key1, #key2, #key3, #key4, #key5').autotab_filter('alpha'); }); </script>Options
- all (default): Any character
- text: Any character except numbers 0 through 9
- alpha: A through Z
- numeric: 0 through 9
- number: Identical to numeric
- alphanumeric: A through Z and 0 through 9
- custom: A custom regular expression to be used along with the pattern setting.
.autotab_filter(settings)
Apply the key/value pairs to configure filter options to an element.
Example
<script type="text/javascript"> $(document).ready(function() { $('#area_code, #number1, #number2').autotab_filter({ format: 'alphanumeric', uppercase: true }); }); </script>Settings
- format
The filtering method of the text field. Available filtering options are listed above.- uppercase
Converts any text to uppercase.- lowercase
Converts any text to lowercase.- nospace
Removes any spaces.- pattern
A regular expression pattern to use for custom formats.
.autotab(settings)
Apply the key/value pairs to configure auto-tab and filter options to an element. Filtering settings are optional.
Example
<script type="text/javascript"> $(document).ready(function() { // This example achieves the same result as Step 3 under Basic Usage. $('#area_code').autotab({ target: 'number1', format: 'numeric' }); $('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' }); $('#number2').autotab({ previous: 'number1', format: 'numeric' }); }); </script>Settings
- All listed settings under .autotab_filter()
- maxlength
Determines the maximum number of characters allowed in a text field. Passing maxlength will override the hardcoded maxlength attribute in the HTML.- target
The text field to auto-tab to when the maxlength has been reached on the current text field.- previous
The text field to auto-tab to when the Backspace key has been pressed in an empty text field. You can also press and hold Backspace to continue auto-tabbing in reverse.
Trackbacks & Pingbacks
- jQuery AutoTab Plugin « Jquery Labs
- Code snippet » 8 ciekawych i przydatnych pluginów do jQuery
- Ultimate List of jQuery Plugins You Should Use on Every Website | Web Designer Aid
- Ultimate List of jQuery Plugins You Should Use on Every Website « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
- JavaScript and jQuery: The workflow | Web
- 方山子的博客 » 24个实用的 jQuery 插件
- 分享24款非常有用的 jQuery 插件 « minvision
- [转] jQuery插件分享 | 1个饼
- Share of 24 very useful jQuery plugin
- 80+ AJAX Resources, Downloads, and Tutorials | Redesigner.org
- Autotab: jQuery auto-tabbing and filter plugin For TextBox
- 分享24款非常有用的jQuery插件 | 想来网
- JQUERY « prubman
- 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag
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!
J
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\.]' });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.
Thanks
I would need to see your example to lend a hand.
nice script, covered basic validation and autotab in one.
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!
Not sure, but this is something for me to consider when I rewrite the script.
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).
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.
$(‘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?
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.
Is this supported in jQuery 1.4.3?
It has not been tested though it may work just fine.
Very Good Stuff!.
Working in JQuery 1.4.3
3 thumbs up!
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
Perhaps I’m not understanding you correctly, but if the cursor is in a text box, then the focus is on that text box.
Dude…you rock! Thanks for the great plugin!
I aim to please
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?
Forget my above comment. It was a small yet stupid mistake on my part. :^)
Thanks a lot, did exactly what I wanted extremely easily.
You’re welcome!
Thanks for that great plugin!
Glad I could be of service!
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.
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')) $('#myForm').submit(); });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.
Thanks for the great plugin.
You are very welcome!
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?
There shouldn’t be a problem. .blur() and .focus() should execute normally. Is the script in question public?
I also noticed that the blur event did not fire as I expected, but I found this discussion, which states that the focus event won’t fire the blur event for the previous element.
http://old.nabble.com/Why-doesn%27t-focus%28%29-trigger-a-blur–ts21458840s27240.html
amazing and very useful plugin.
Why thank you!
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
That’s not a bad idea!
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
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.
Great plugin!
Heep up the good work!
I will do my best!
Thank You ! It’s Very Useful.
Glad I could help!
It does not look like auto-tabbing is working on iPhone 3 and 4. Should it work?
I have no clue, but I’d be willing to accept an iPhone, iPod Touch or iPad to test
How can use this plugin along with live(). I add few fields which are added after page is loaded.
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.
Hi
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.
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!!
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
smash
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?
Sounds like it’s a bug Autotab :-\
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:
$(‘.fieldClassSelector’).autotab_magic().autotab({target:’next_field’,format:’numeric’});
$(‘.fieldClassSelector’).autotab_magic().autotab_filter({format:’custom’,pattern:’[^1-5]‘});
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.
It’s works nice
Hi,
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
URI: http://www.mathachew.com/wp-includes/js/prototype.js?ver=1.6.1
Message: Object doesn’t support this property or method
Line: 25
Char: 264
Code: 0
URI: http://www.mathachew.com/wp-includes/js/jquery/jquery.js?ver=1.4.4
Any ideas how we could make it work in IE.
Thanks,
Laura
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.
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?
Thanks.
Hi,
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 ?
Thanks.
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.
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) {
e.preventDefault();
jQuery(this).moveNext();
}
});
});
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.
Regards
-Ron
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.
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
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?
Can the field have either 10 or 13 at any given time or only 10 or 13 depending on another condition?
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?
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
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?
You need to have jQuery included in your site. I suggest reading this How jQuery Works tutorial.
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.
Vinod.
I appreciate the help, but unfortunately the iPhone does not support the focus and blur events. Read more here: http://www.quirksmode.org/dom/events/
Thanks Matthew!
Thanks for sharing! Plugin worked great and was easy to set up!
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?
Thanks.
I plan to include this when I rewrite the plugin, and hopefully that will be soon.
Any further news on the above ‘intelligent paste’ being added.
Plugin is great – this function would make it perfect.
Only that it’s in the plans for my next update. No eta on when the next version will be available, unfortunately.
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?
Dont work with live() event. Any idea?
I want to know when you say jquery.autotab-1.1b, if the “b” is a beta version or another notation.
Yep, b for beta
Thx a lot
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:
$(‘#email’).autotab_filter({format:’custom’,pattern:’/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/’});
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?
p.s. I also tried it without the preceding and trailing backslashes and got the same error.
$(‘#email’).autotab_filter({format:’custom’,pattern:’^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$’});
And, congrats on the new-born!!!
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!!!
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?
Hi,
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.
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.!
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.