mathachew/jquery-autotab

A jQuery plugin that provides auto tabbing and filtering on text fields in a form

jquery-autotab's Issues

Pasting broken when uppercase option used?

I have 4 textfields, each with a maxlength of 1. If I paste a four letter word in the first input (for example send), it will correctly paste [s] [e] [n] [d].

If I set the uppercase option to true and I do the same paste, it will go wrong. When I try it with send, it pastes [S] [E] [S] [S]. I tried with a couple of other strings, and it always seems to do correctly paste the first two letters, but then repeat the first letters.

Tested on Chrome.

the jquery-autotab not working on iphone, just working on desktop web browser

the jquery-autotab not working on iphone/mobile, just working on desktop web browser i have write extra code to make it work.

Key filtering doesn't work on several HTML5 input types

If the input type is set to 'tel', 'email', and presumably the other HTML5 text-like input types (http://www.w3schools.com/html/html_form_input_types.asp), filtering doesn't work for key presses. It does still work for paste and drop.

problem with input type="number"

Great plugin!

But, I can't get it to work for <input type="number" .. /> fields. "number" fields are convenient on devices without keyboards, because they automatically bring up a numeric keypad, instead of a qwerty-style keyboard.

This seems to happen on IOS Safari and firefox on android.

Here's some sample code:

<form id="theform" action="yadayada.html" method="get" >
  <div class="Month"><span class="frmfld">
    <label for="Month">MM</label>
    <input type="number" value="" maxlength="2" size="2" id="Month" class="number" /></span></div>

  <div class="Day"><span class="frmfld">
    <label for="Day">DD</label>
    <input type="number" value="" maxlength="2" size="2" id="Day" class="number" /></span></div>
  <div class="Year"><span class="frmfld">
    <label for="Year">YY</label>
    <input type="number" value="" maxlength="2" size="2" id="Year" class="number" /></span></div>
  <div class="SubmitBtn" >
  <input id="btnSubmit" type="image" class="submit" src="images/submit.png" width="359" height="109" border="0" />
  </div>
</form>

<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autotab.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
        $('#Month').autotab({ format: 'number', target: '#Day' });
        $('#Day').autotab({ format: 'number', target: '#Year', previous: '#Month' });
        $('#Year').autotab({ format: 'number', target: '#btnSubmit', previous: '#Day' });
    });
</script>

Change Event on every input field

Thanks very much for this greate jQuery Plugin.
It looks like not on every input field a change event is fired if i copy paste a longer string over multiple fields.

I added a $(this).trigger('change'); in the 'autotab-next' event handler to solve this problem for my case. But i am shure there is a nicer solution.

CMD+V issue with Firefox (v31)

To reproduce:

1- open http://autotab.mathachew.com/ with Firefox (I tested with the latest v31)
2- paste a clipboard content in a field with cmd+v
3- UNEXPECTED: a "v" char will be write in the field instead of clipboard content

1.5.1 : uppercase ko

Hello,

uppercase option does not work with v1.5.1
see demo "Uppercase letters and numbers"

thx

On press "Go" button, form not submitted in IPAD and IPhone

When i press "Go" button in IPAD, form is not getting submitted.

If i remove "|| keyChar === '" this code from below code, it works.
if (hasValue && (keyChar === null || keyChar === '')) {
return false;
}

support number input

Hi I'm running this in angular and it works really well with text inputs.. Change the input type to number and tab backwards and try and replace a selection by typing a new number doesn't replace all the contents it just jumps to the next field

Wondering it there's a fix and why numbers were treated differently in the source?

IE : pb when overwriting selected characters

Using internet explorer (v 9.0), when I type characters to update selected ones, the field is not correctly updated (the 2 firsts typed characters are inverted).

ex: with jQuery Autotab Demo, in phone Number input,

click within the first field
type 123 : the cursor is now in the 2nd field
hit shift-tab to go back to the 1rst field : 123 is now selected
type 456 : then the 1rst field is displaying 546

Pasting overwrites button text if button is <input> instead of <button>

This was part of bug #65, but that got closed when part of it was fixed. Still happens in 1.9.1, except for the case where the pasted text is the same length as the text fields.

When you paste into autotab input text fields, the text of the following button gets overwritten if:
-The button is an rather than a (input with type=button, submit, maybe others)
-The amount pasted is longer than the input text fields. (The excess text becomes the button text.)

1.9.0 fixes the case where the button gets blanked if the amount pasted characters equals the input field lengths.

Sample html code (slightly simplified from bug #65):
(Note that if you switch the order of the and the

, the problem goes away.)

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Demo: autotab 1.9.1 overwrites button text</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://raw.githubusercontent.com/Mathachew/jquery-autotab/1.9.1/js/jquery.autotab.min.js"></script>
</head>
<body>
  <form>
    <input class="keyEntry" type="text" maxlength="5" />
    <input class="keyEntry" type="text" maxlength="5" />
    <input value="Submit" type="button" />
    <button type="submit">Submit</button>
  </form>
  <script>
$.autotab({ tabOnSelect: true });
$('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true});
  </script>
</body>
</html>

Autotab is great, but stopped working for unknown reasons

I set up autotab at the beginning of my project and it worked brilliantly at first. I then went and built all the other components of the project out. At some point, I'm not sure when, autotab just stopped working. No errors are being thrown to the console, it just isn't working. Are there any known conflicts between autotab and other things? I am on jquery 1.10 but have tried other versions with no luck so far. I removed the other jquery i'm doing (even though it was also there from the beginning) just to check but that changed nothing. Very simple use of autotab for phone numbers here, nothing special. Updating from 1.5 to 1.6 changed nothing. Here is the code I am using:

jQuery('#edit-submitted-main-number-ny-2').autotab({ format:'numeric', maxlength:'3', target:'#edit-submitted-main-number-ny-3' });
jQuery('#edit-submitted-main-number-ny-3').autotab({ format:'numeric', maxlength:'3', target:'#edit-submitted-main-number-ny-4', previous:'#edit-submitted-main-number-ny-2' });
jQuery('#edit-submitted-main-number-ny-4').autotab({ format:'numeric', maxlength:'4', previous:'#edit-submitted-main-number-ny-3' });

repeated for each of my phone number fields. Didn't even try to do anything fancy like looping through, just dropped it into jQuery(document).ready(function($) {

Note: I am using the jQuery syntax instead of $ because for whatever reason, the $ syntax always fails when using jQuery on drupal sites.

Any suggestions on where to look would be appreciated.

about data-xxx attribute

jQuery Autotab support "data-autotab-format" data attribute on HTML element,
is possible to add a new feature like
"data-autotab-target" or "data-autotab-previous" data attribute

thanks !

Issue with ASP.Net Webforms + asp:TextBox TextMode

Having an issue on a Webforms site. I could certainly be doing something wrong though and/or this could be a known issue. Everything works fine as long as I do not set the TextMode="Number" on my <asp:TextBox> control.

I downloaded and reference the auto-tab file, then add the following to the .aspx page that I want auto-tabbing on:

$(function()
        {
            $.autotab({ tabOnSelect: true });
            $('.autotab').autotab({});
        });

Then I just add .autotab to the CssClass variable of my TextBox control.

Like I said, everything works fine unless I add the TextMode="number" property. I have used an asp:CompareValidator to get around this issue for now but just wanted to let someone know and see if there were any fixes for this. Thank you!

Pasting maxlength data tabs but deletes data in next field

Whenever I paste data equivalent to maxlength, it tabs to the next field but deletes all data in the next field.

I saw that you had a few pasting issues already so I tried to upgrade from 1.7 to 1.8.1 and it still occurred.

Example: http://jsfiddle.net/B9hJ9/10/

Paste failure for alphanumeric if 2nd or later fields ends with alpha

Demo page (http://www.mathachew.com/sandbox/jquery-autotab/): For 5 fields of length 5, using the alphanumeric filter, some values paste incorrectly, and extra characters get pasted into the next field (regular expression field on the demo page, but in my code, a button's text gets overwritten!).

Fail:
AAAAABBBBBCCCCCDDDDDEEEEE > AAAAA BBBBB AAAAA AAAAA AAAAA
regular expression field: (empty, correctly)
1111A2222B3333C4444D5555E > 1111A 2222B 1111A 1111A 1111A 1111A
regular expression field: 111122223333444
111112222B333334444455555 > 11111 2222B 11111 2222B 11111
regular expression field: 222233333444445
11111222223333C4444455555 > 11111 22222 3333C 11111 22222
regular expression field: 33334444455555
1111122222333334444D55555 > 11111 22222 33333 4444D 11111
regular expression field: 222223333344445
111112222233333444445555E > 11111 22222 33333 44444 5555E (correct, but...)
regular expression field: 111112222233333
Pass:
1234567890123456789012345
1111122222333334444455555
Q1111R2222S3333T4444U5555
AAAA1BBBB2CCCC3DDDD4EEEE5
1111A22222333334444455555

Tested with demo page and my code using autotab 1.7.1. Tested in Windows and Linux with IE, Firefox, and Chrome. Same problem in all browsers.

Works correctly with autotab 1.2.

My code:
$.autotab({ tabOnSelect: true });
$('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true });
Autotab 1.2 also works with my older code:
$('.keyEntry').autotab_magic().autotab_filter({format: 'alphanumeric', uppercase: true});

Knockout and pasting text which spans multiple fields

I've got a few text input fields one after the other, the first one is 6 characters long, the second is 8 the third is 30 long.

If I paste some text that is 20 characters long into the first box AutoTab does a nice job of splitting the text into each of the boxes that follows. Awesome!

But when these fields are bound using Knockout the code in the 'drop paste' event causes Knockout to get a bit confused.

What's happening is Knockout is getting the event for the original 20 character text in the first field but not an event once that text is filtered to 6 characters, and this continues for the following fields.

I work around the issue by firing

$(e).trigger('input');

before each appropriate

$(e).trigger('autotab-next');

Which causes the knockout binding to relalise that the field has now changed since being filtered.

:-)

when inputbox is set to email and i type in text and try to hit backspace it goes to the previous box

Allow to type but not autotab if it doesnot match?

Hello,

Thank you for your great plugin.

Is it possible to have scenario like this?

I want user to type in input field, but autotab only if the field matches a pattern. I guess right now, it autotabs on maximum field. I want it not to autotab if the input is not valid?

Not work with input type "tel"

Not work with input type "tel"

textarea input type not working for IE9

I just installed 1.7 and it appears that the new maxlength update is not compatible with IE9 (at least). I've tested it in IE10 and it works, but with IE9 you cant type anything in a textarea (with or without a maxlength set). I'm going to continue fiddle with it and see if I can figure out whats causing it.

Data in disabled fields is being removed with backspace even though focus is not on element

I've just recently upgraded from one of your earlier versions to the latest version and I noticed a problem. If you have disabled fields on your form that contain data and you are backspacing through the form it stops tabbing when there is a disabled field, and then starts deleting the characters inside the disabled field even when the field is not in focus. I would love to disable backspacing into another field as my users hate that part of the function but love the autotab forward. I could live with just a solution that does not remove data in disabled fields though. Any thoughts?

2 characters when used with jQuery autoNumeric

I use autoNumeric https://github.com/BobKnothe/autoNumeric for ensuring numeric and currency on a page. When used with autotab-1.1b and the
$(document).ready(function () {
$(':input').autotab_magic();
});
it worked fine together. However, upgrading to the new version 1.7.1 and using the newer
$(document).ready(function () {
$(':input').autotab();
});
it still enforces currency and numeric, but I get 2 characters for every key press. So '3' becomes '33' and '6' becomes '66', etc.

Delete Key In Empty Field Deletes Previous Field Content

When in an input field that has a previous field to tab back to and pressing the [Delete] key with nothing in the current field, Autotab will tab back to the previous field (as expected) but also delete the previous fields value. I would expect it to keep the previous fields value and just focus on the entire field or place the cursor at the end of the field's value (if possible).

P.S. Handy plugin, saves me some time.. I would suggest registering this on jQuery's Plugin Registry.

Issue with IE

Hi,
　　Thanks again for your effort last time. The change event is fire properly now. But i got another minor issue with IE.

　　The "autotab-next" event is triggered and handled before the default behavior of the input. With an text-box which max length is 3. When i enter "123". Only "12" shows up in the in text-box and "3" is in the next one. It focused into the next input before the last char is appended. I could be due to the event handle order of IE (I'm using IE11 on Win 7) since it works fine with Firefox, Chrome.

Here some screenshot, hope it helps.
After keypress of the last character.

Result

　　I believe we could eliminate this bug by delaying "autotab-next" event trigger. Hope you have time to follow this one also. Thanks a lot.
// Please excuse my bad English.

Autotab prevents live input validation with Angular using ngPattern

It only validates input after focus lost. Happens in Angular and jQuery versions.
It is a problem only for the last input since the others automatically lose focus with Autotab.

maxlength="x" is replaced with maxlength="2147483647"

I've noticed some funky behavior where certain text fields with pre-assigned maxlengths get those maxlengths re-assigned to an arbitrarily large number such as "2147483647." This has happened when using the global function $.autotab() as well as local functions .autotab()

Not Working with display=none

Hi

When the input have a display=none the autotab not working

filtering doesn't work on input[type=number]

According to #75 limited support for tel, and several other HTML5 input fields was added. (What does limited support mean?)

Try to type 12,5 in to both input fields here http://jsfiddle.net/8agaog06/. Numberfield doesn't block the comma, textfield does.

<input type="number" id="numberField">
<input type="text" id="textField">

$('#numberField').autotab('number');
$('#textField').autotab('number');

Is there a way to get this to work on number inputs?

Mobile support?

This plugin is perfect! Anyway to get some mobile safari support?

Connect All Initialized Fields

At first I was confused why autotab wasn't working, then I realized that "tabbed" fields needed to be selected/initialized at the same time.

$( '#inputA' ).autotab();
$( '#inputB' ).autotab();
$( '#inputC' ).autotab();
// vs.
$( '#inputA, #inputB, #inputC' ).autotab();

It would be great if there was a way to "connect" all separately initialized fields. This way dynamically added elements could be .autotab()'ed and automatically be included into the "tab group". Perhaps some sort of global autotab setting.

Improve pasting

While Autotab supports pasting, it's far from intelligent and works only under ideal scenarios. Update pasting to track the position of all characters so that the pasted string is split up more accurately and can better handle situations where there might be repeating characters.

IP address filter type

Explore the possibility of a new filter type for IP addresses (both IPv4 and IPv6). The filter would support:

IPv4

• Auto tabbing when . is pressed.
• Filter numerical values.
• Auto tabbing when a maximum value has been reached. If someone types 3, then the value cannot be higher than 39, and when the second number is typed, execute an auto tab.

IPv6

• Auto tabbing when : is pressed.
• Filter hexadecimal values.

Data attributes not working as expected

Hi,
I am trying to use attribute data-autotab-target on a field to jump to another element that is not part of the autotab group but it doesn't seem to work.
In my example I have 6 fields where 2 are randomly enabled, the autotab targets all 6 fields.
Looking at the data on the input with the data attribute it doesn't have the target string I set, instead it has a jQuery object which is empty
Any help would be very welcome?
Thanks

Auto tabbing on specific characters

Add support for auto tabbing on specific keys, like the tab key itself.

If there are a set of fields for an IPv4 address, trigger the autotab-next event when a period is pressed. In the case of an IPv6 address, do the same for a colon. If the maxLength is reached, the same key is ignored, just like the tab key is ignored immediately after an auto tab.

This feature is more useful in situations where a field supports a minimum and maximum number of characters.

Autotab automatically jumps on desktop version but on mobile version in iOS it does not work

When on the desktop version of the site
http://autotab.mathachew.com/

when you enter the phone number 123 or any digit it automatically jumps to the other part of the phone number and works perfectly.

NOW

Trying this out on a iOS apple iphone the autotab feature does not work ( basically I have to hit the next arrow for it to jump instead of it automatically tabbing to the next section.

Remove or suspend auto tab and filtering

Provide a way to disable auto tabbing and filtering, with a similar feature to re-enable the feature. Disabling one or both should be possible as well.

Option to turn off autotab when TAB key pressed

For those people who use keyboard as primary input device, they would normally press TAB to advance to next field, with autotab in action this can confuse things, so could add option to check for TAB key presses which then turn off autotabbing.

Auto tab not working in Samsung internet browser galaxy s4

Hi I can't seem to get autotab working on an s4 using the native internet browser. Just wondering if you could test please?

I've tried with text and tel (which is what I'm trying to auto tab on)

Feature request: tab upon arrow keys

Could you add arrow key functionality to autotab?

• Move to the previous field when the user types the left arrow on the keyboard and the cursor is on the far left.
• To the next field if the user presses the right arrow and the cursor is on the right edge.

The script seems to mess with jquery change event.

Firstly, thanks for the very useful plugin. But the plugin is messing with the jQuery's change event. Try this on the demo page you provided, nothing is ever logged. (Also with $.on)

$(":input").change(function(){console.log("change event is fired");});

Please make some time to follow this serious bug.

Thanks in advance and excuse for my bad English.

Can you manually initialize a SELECT box?

Since I'm having issues with textarea's in older IE versions running in compatibility mode, I'm initializing the text boxes and check boxes individually, however I can't seem to figure out how to initialize a select box.

I'm calling autotab with:
$('input[type=text], input[type=password], input[type=checkbox]').autotab();

I've tried to add:
$.autotab({ tabOnSelect: true });

but then that initializes textareas again and breaks them. Is there a way to add select boxes without initializing the textareas?

Thanks,

Link Broken

http://www.mathachew.com/sandbox/jquery-autotab/ is broken

How to pragmatically populate fields on which autotab is enabled?

Hi,

I can't figure out how to manually change the input field values and have the autotab trigger. Even with http://bililite.com/blog/2011/01/23/improved-sendkeys/, it still bypasses autotab. Only physical input triggers it.

Any ideas? Thanks.

Update logic to factor other form fields

Update Autotab's behavior for other form fields.

• Skip hidden fields, even if they're in a selector, like :input
• Select list
  • Auto tab backwards when backspace is pressed
  • Auto tab forward when a value is selected (configurable)
• Multiple select list, Button, Checkbox / Radio button
  • Auto tab backwards when backspace is pressed
  • Do nothing when selected/clicked/ticked
• Textarea
  • Auto tab backwards when backspace is pressed and the textarea is empty
  • Explore options of establishing a maxLength and enforcing it in browsers that don't support it (IE9 and below, Opera). If Autotab is able to effectively support this, then auto tab when the max length is reached. If not, then proceed with normal behavior.

Can not enter in field in Firefox but can in Chrome

I am writing a script to quickly add people to my departments website. I have the autotab fully working on Chrome but on Firefox, I can not enter in anything for the persons name.

Source code: https://gist.github.com/Skullmonkey/8428841

Format doesn't handle drag and drop

Dragging and dropping text from elsewhere into the textbox does not trigger the format filter.

I believe this can be fixed by simply adding the drop element to the paste event handler such that

}).on('paste', function (e) {

becomes

}).on('drop paste', function (e) {

. Tested on IE8+, Chrome, and Firefox (if I recall correctly). I am not familiar enough with the pull process to make this change on my own. :)

Chrome Issue on Gaxaxy s5

I have been able to test the attached configuration in chrome (desktop), Firefox (mobile and desktop), safari, IE, and several different emulations within Chrome but the auto tab will not function in chrome on a Galaxy s5.

broke default angular filter

this row

$('input[type=text]').autotab()

broke default angularjs filter, i think this plugin need some refactoring :)

when on iphone6 for some reason all text is uppercase