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 (1912144)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.
212 Comments
→
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
- jquery 表单插件 | 耀然程序世界
- 12 个必要的 jQuery 表单插件 | 极地 EA163
- 12 ciekawych pluginów javascript dla formularzy | Darmowe skrypty, grafiki dla webmastera!
- 20个jQuery插件-帮你打造完美网页表单 | 智果实验室
- 20个jQuery插件，帮你打造完美网页表单 | 松鼠博客
- iGuoguo 爱果果酷站 » 20个jQuery插件，帮你打造完美网页表单
- 12 Essential Javascript Form Plugins | CollegeGFX | CollegeGFX
- 【转载】12个必要的jQuery表单插件 | 龟仙岛
- 推荐12款JavaScript表单插件 » Gso 积累
- 代码例程：12个基本的JavaScript表单插件 | 1freehost
- 20个jQuery插件，帮你打造完美网页表单 | IT储备网
- 15 jQuery Plugins for Simple & Effective Forms User Interface | Blog for designers web developers bloggers freelancers SEO
- 15 Plugins y tutoriales jQuery para mejorar tus formularios
- 12款漂亮的JavaScript表单插件 | EC-CODE - 又一个 WordPress 站点
- jQuery表单插件，插件不在多，在于精！ | 引领人生
- 12个必要的jQuery表单插件 | Jony's Blog
- jQuery Wordpress Plugin - Form Input Auto Tab and Input Validation works with Contact Form 7
- Autotab: jQuery auto-tabbing and filter plugin » imLuxin
- 20个jQuery插件，帮你打造完美网页表单 – 90互联网数据中心
- 13 Effective Free jQuery Plugins that Enhance Your Forms | Free and Useful Online Resources for Designers and Developers
- Can you add jQuery that forces ‘tab’ based on chosen delimiter in a copy/paste to HTML form? | Jisku.com
- 10+JavaScript表单插件 : 免费资源分享站
- 10+ 十分实用的 jQuery表单插件 : 免费资源分享站
- 四五外包 » 10个超棒的jQuery/JavaScript表单插件推荐
- 四五外包 » 20个jQuery插件，帮你打造完美网页表单
- 10个超棒的jQuery/JavaScript表单插件推荐 - MAC APPS - 苹果应用荟萃 - macapps.asia
- Autotab – jQuery plugin for auto-tabbing and filtering | EasyjQuery - Tips, Tricks, and API for jQuery
- 分享24款非常有用的 jQuery 插件 | 田淏予博客
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?
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.
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 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
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.
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?
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.
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.
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.
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.
Thank you! Great Plugin!
Thanks!
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!
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,
Lewis.
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.
Hi Mat,
I wish I could filter an input text for decimal value. Which code I should use ?
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
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
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.
just to add… it does work in Safari, but not in Firefox. (backspacing through pre-populated area code field)
thanks
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).
Also, any ideas on how to make auttoab work on iPad? (safari mobile)
Sorry, not at this time. I have an iPhone I can try to test it out with, but I currently lack the time.
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?
Yep, just pass the jQuery selected object: pass $(‘#CPH1_Student1PhoneNumber2′) instead of ‘#CPH1_Student1PhoneNumber2′
Thank you so much…. really a great plugin … thank you again
Thanks very much for this it’s great
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){
p--;
}
if(i > 0 && n < 0)
$(this[i]).autotab({ previous: $(this[p]) });
else
$(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))
$(this[i]).focus();
}
return this;
};
I forgot to mention… you have to add the definition for reallyvisible…
// this should determine if a field is really visible
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
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.
HI, Autotab is not working on iphone and Android
can someone please help me? Apprecaite it THX
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!
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!
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.
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
OMG it works so perfectly, you saved me a bunch of code, thanks so much and have a great day!
Very nice application, thank you for sharing.
Have a nice day…
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.
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.Good plugin.
It help me so much.
Thanks.
Thanks
Very good Script. I can use in my website for job classifieds!
Thank you! 
Like another user I have a form that dynamically enables/disables input fields. How can autotab be modified to skip over disabled fields?
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.
Thank you for ur help
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…
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!
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 -
http://niallrutter.com/downloads/jquery.autotab.js.zip
- or run the original through jshint.com 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
I am trying to get this script to work on my wordpress install:
http://austintexassprinklerrepair.com/
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!
Nate
You have a JavaScript error on line 70, where
<!--is being encoded to<!--. It’s also happening on the closing://-->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.
There’s still an issue. You’re jQuery script calls noConflict(), so replace
$withjQueryand you should be good to go. Also, the textboxes are larger in Chrome and the last field is on a separate line.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!
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(‘:input’).autotab_magic();
jQuery(‘#numeric’).autotab_filter(‘numeric’);
jQuery(‘#alpha’).autotab_filter(‘alpha’);
jQuery(‘#text’).autotab_filter(‘text’);
jQuery(‘#alphanumeric’).autotab_filter(‘alphanumeric’);
jQuery(‘#uppercase’).autotab_filter({uppercase: true});
jQuery(‘#lowercase’).autotab_filter({lowercase: true});
jQuery(‘#nospace’).autotab_filter({nospace: true});
jQuery(‘#uppercase’).autotab_filter({uppercase: true});
});
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.
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(‘:input’).autotab_magic();
jQuery(‘.numeric’).autotab_filter(‘numeric’);
jQuery(‘.alpha’).autotab_filter(‘alpha’);
jQuery(‘.text’).autotab_filter(‘text’);
jQuery(‘.alphanumeric’).autotab_filter(‘alphanumeric’);
jQuery(‘.uppercase’).autotab_filter({uppercase: true});
jQuery(‘.lowercase’).autotab_filter({lowercase: true});
jQuery(‘.nospace’).autotab_filter({nospace: true});
jQuery(‘.uppercase’).autotab_filter({uppercase: true});
});
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!
Will this plugin work for autocomplete and listbox components
Nice work Matthew.
This little gem helped me out considerably and will make our user experience that much more polished.
Thanks for sharing!
Rich.
Matthew,
I got your plugin working and it is a beautiful thing! Thank you!
Phil
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.
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!!
Awesome, can’t wait for these updates
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 !
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.
GREAT PLUG-IN! Many thanks.
Matthew:
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.
Phil
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.
hi,
im new for js.i used onkeyup=”ready()” for my text feld but in not work.pls help
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.
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.
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….
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.
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 ……
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.
On the iPad, the keyboard closes after a field is full.
I’ll look into this. Hopefully an old iPhone 3GS I have lying around will be sufficient to test this.
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′);
$(‘#area_code’).val(”);
$(‘#number1′).val(”);
$(‘#number2′).val(”);
$(‘.test’).autotab({ format: ‘numeric’ }).autotab_magic();
}
the auto tabbing works fine but maxlength remains limiting the textboxes to 3 although i dynamically being changed…..is the browser caching the old ‘maxlength’ attribute value these textboxes this is a cool plugin if it could just do this for me
Unfortunately this is due to poor coding on my part. You can try unbind() for both keydown and keyup when calling changeLength().
Hi,
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?
Thanks
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.
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()) {
$(‘#’+id).autotab_filter(
{format: ‘all’, uppercase: true});
});
}
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!
I created a example in http://jsfiddle.net/7RSEh/1/
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.
thanks
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…