jQuery Autotab 1.1 beta ready for testing
September 10, 2008 - 4:17pm — Mathachew
After receiving some great feedback, I have finally worked my way into updating Autotab with some key fixes and handy new features. Before I release this as a final version, I'd like additional testing and critiques to be done to make v1.1 final and release it to the masses, so please download, test, and critique! Detailed descriptions can be found in the source file.
- Updated code separation for autotabbing and text formatting, so now one or the other can be applied.
- Added a new function autotab_magic() automatically determines where to autotab when the text field has reached its limit, after formatting (if applicable). Usage details below.
- Fixed a bug in Safari where pressing backspace wouldn't focus on the previous target.
- Fixed a bug in IE where using the left arrow key would force the cursor to the end of the field's content.
- Added a custom format option, which requires that you provide a regular expression for your own formatting. Usage details below.
- Added the ability to pass a function to use for formatting instead of relying only on the built in filters. Usage details below.
- The old recommended use of Autotab is fully supported and backwards compatible, though autotab_magic() and autotab_filter() are now the preferred method, briefly shown below.
- Added proper documentation in how to use each new, and the already existing, method.
autotab_magic()
$(document).ready(function() {
$(':input').autotab_magic();
});
Optional parameter is an element's ID or an element's index to auto focus on the element when the page has loaded. The filtering in Autotab is optional and is not required in order to achieve the desired autotabbing results.
Custom Regular Expression
$(document).ready(function() {
$('#total').autotab_filter({ format: 'custom', pattern: '[^0-9\$\,]' });
$(':input').autotab_magic();
});
Function Formatting
function format_float(val) {
val = parseFloat(val);
if(isNaN(val))
return '';
return val;
}
$(document).ready(function() {
$('#total').autotab_filter(format_float);
$(':input').autotab_magic();
});
| Attachment | Size |
|---|---|
| jquery.autotab-1.1b.js.txt | 6.82 KB |
RSS Feed
Recent blog posts
- Conclusions, confusions, fallouts, everything inbetween
- It's been months, so where do I even start?
- Back from our Thanksgiving trip
- Been a while, random thoughts and such
- ¡Ay caramba! Thanks, but no thanks!
- A night with Heroes
- More family photos to share
- Goodbye AssignByWeb, hello Stayhealthy
- I'm back... already!?
- Bearing down for Ike
Recent comments
- Slide Extended Code
15 weeks 5 hours ago - Slide Extended
15 weeks 18 hours ago - nospace true|false not working
15 weeks 3 days ago - Retaining expanded state
15 weeks 6 days ago - how to retain expanded state after page reload
16 weeks 6 hours ago - How to expand all
16 weeks 20 hours ago - auto rotate?
16 weeks 1 day ago - This can be added, but
16 weeks 1 day ago - All Expanded by Default
16 weeks 3 days ago - It would be nice to have the
17 weeks 6 hours ago
Comments
Thanks!
Matthew, thanks very much for providing this! I was looking around today for a Javascript auto tab implementation, and found several bad implementations posted in various places (with bad behavior like after a Shift+Tab, immediately popping the focus right back to the next field if the previous field was full; also, no support for the Backspace key) before I ran across yours.
I'm somewhat of a Javascript novice, so this may be obvious to experts, but it took me a little while to figure out, so I'll go ahead and post in the hopes that it might be useful to someone: You can wire up the autotab_magic() function to apply to several specific input fields on the page (instead of all input fields on the page) using syntax like:
var inputFields = new Array("#field1", "#field2", "#field3");
$(inputFields).autotab_magic();
-Jon
Applying autotab_magic to multiple elements
@Jon:
Indeed jQuery has a powerful selection engine, of which the autotab_magic() function makes good use.
In fact, you needn't necessarily create an array to accomplish the simple example you give. A simpler version would look like this:
$("#field1, #field2, #field3").autotab_magic();
This version is not only clearer, but also a marked improvement when you consider cluttering the field of variables and the extra memory usage resulting, however minor.
It is important to note that this is NOT the same as calling jQuery with each element in its own set of quotations. That would give multiple arguments to the jQuery core, which it will usually take as context. For more information on this concept you can read about the jQuery core of selection by expressions, html, and elements (including arrays) at <http://docs.jquery.com/Core/jQuery>. A list of (some of) the possible ways to select elements is enumerated at <http://docs.jquery.com/Selectors>.
Best of luck as you continue learning the jQuery engine!
How about a select-on-focus?
Due to different default behaviours in FF2/3 and IE6/7, i'd like to suggest to autoselect all content of the input field on focus using
defaults.target.focus().select();
That behavior varies
This type of behavior varies with each browser. The logical step is to not have your text selected but instead for the cursor to be at the end of the text. In the case of backspacing, the last character of the previous field is removed. I have seen this behavior occur for several programs, and it seemed proper, so that's the method I have implemented.
Wow ! This is just what i needed !
Thanx.
Just in case, for users like me that didn't understood how to use uppercase and lowercase...
You have to use it like this
$(this).autotab_filter({uppercase:true});I love this, but...
... I tried do force typing this whay :
NAME (uppercase)
Suname (first char uppercase, others lowercas)
I can't make it work.
I tried those regular expression : '[:upper:]{1}[:lower:]*', '[A-Z]{1}[.]*', '[A-Z]{1}[a-z]*'
It makes strange things... not what I expect.
Can you help me ?
autotab_magic() needs to handle disabled fields
Right now if a field is disabled, then it still tries to tab into it, stopping the process.
Good point, but there could be draw backs
I hadn't considered disabled fields and the fact that the :input selector returns them as well. On the flip side, a form could have disabled fields that at some point become enabled, which would affect the order of tabbing if I ignored disabled fields. This should be made into a feature where disabled fields are automatically ignored unless it is told not to.
IP Address Mod
Is there an easy way for auto tab to tab to the next box on a '.' pushed?
IE - I have 4 Inputs for an IP Address. All with maxlength of 3. Some will only need 1 or 2 numbers. But my users have been asking to be able to just hit the '.' key - and have that tab over to the next input. Of course - the '.' would not be filled into the input area.
Thanks in advance for any help on this.
John
Possible, but with a bit of work
It's definitely doable, and should probably be added as a separate method so that it applies an IP Address rule on the specified fields, where it does exactly as you describe, and nothing more. I currently don't have time to expand 1.1b to include this and other features, but I will keep it in mind when I am able to work on this again.
Direction?
Thanks for your response Matthew.
Since I need this for a project I'm working on - can you point me in the direction I'd need to be in?
Thanks
John
Preliminary testing works
Here's what I've worked up for the IP filter after spending a few minutes. If this is sufficient, then it will be included in the 1.1 final. It actually didn't require that much extra work, which is always nice.
case 'ip':to apply the same rules as number and numeric (roughly around line 153)else if((e.which == 110 || e.which == 190) && defaults.target && defaults.format == 'ip')
defaults.target.focus().val(defaults.target.val());
The format value should be ip and autotabbing will work when the limit has been reached or when you press ., while also filtering out any non-numeric characters. I hope this helps!
Thanks for the help
Thanks for the help Matthew.
I'm wondering if I'm missing something - as this isn't working for me.
I have:
case 'number':
case 'numeric':
case 'ip':
var pattern = new RegExp('[^0-9]+', 'g');
val = val.replace(pattern, '');
break;
and:
if(e.which != 8)
{
var val = $(this).val();
if($.inArray(e.which, keys) == -1 && val.length == defaults.maxlength && defaults.target)
defaults.target.focus();
else if((e.which == 110 || e.which == 190) && defaults.target && defaults.format == 'ip')
defaults.target.focus().val(defaults.target.val());
}
and am calling it like so:
$(':input').autotab_filter('ip');
$(':input').autotab_magic();
Autotab + live() event?
I'm using some ajaxified stuff in ASP.NET and can't seem to get this to work with live(). Any ideas?
change event
I'm not sure it's specific to browser or not, but IE6 doesn't fire the .change() event when Autotab focuses the next/previous input. A quick modification would be: triggering the .change() event on current input before focusing to the next/previous input. However, that always fires the event regardless of the content has been modified or not. Do you have any suggestion?
BTW, thanks for an useful plugin.
It would be nice to have the
It would be nice to have the option of easily overwriting what the user input...
I've seen this on some form fields...
For example. you typed in phone numbers but realized you goofed. so you click back in the first text box, and start typing, and it automagically overwrites orignal text, so no need to highlight and overwrite or delete chars.
Fast and efficient.
This can be added, but
This can be added, but when wanting your page to behave in a logical manner, overwriting your text instead of inserting new text goes against the norm. Adding support for this on top of the logic to filter and limit text seems like unnecessary overhead for a rather basic application.
nospace true|false not working
I set it to true it removes the space, I set it to false it removes the space, I don't set it it removes the space. Am missing a concept here?
Post new comment