search

Mathachew / jquery-autotab

A jQuery plugin that provides auto tabbing and filtering on text fields in a form
http://autotab.mathachew.com/
366 stars 98 forks source link

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

Closed bill-uncultured closed 9 years ago

bill-uncultured commented 9 years ago

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});

Mathachew commented 9 years ago

Ouch. Good points. I have some work to do!

bill-uncultured commented 9 years ago

A bit more info that might help narrow it down:

My .autotab() code (but not autotab_magic()) works through version 1.6. Version 1.7 is where the strange paste issue starts happening 1111A2222B3333C4444D5555E > 1111A 2222B 1111A 1111A 1111A 1111A next field / button text: 111122223333444

Through version 1.5.5, I can use either $.autotab({ tabOnSelect: true }); $('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true}); or $('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true, tabOnSelect: true }); But in 1.6 and 1.7, the automatic tab doesn't work for the 2nd, one-line version: $('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true, tabOnSelect: true }); ABCDEFGHIJKLMNOPQRST > ABCDE nor with both. In version 1.6: $.autotab({ tabOnSelect: true }); $('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true, tabOnSelect: true }); ABCDEFGHIJKLMNOPQRST > ABCDEFGHIJKLMNOPQRST (all in 1st field)

bill-uncultured commented 9 years ago

In 1.7.1, even if I use all numbers, it still "tabs" into my button and erases the label. (Whether I set tabOnSelect:true in just $ or both $ and $('.keyEntry').

Let me know if you want me to split any of this into additional bugs.

Mathachew commented 9 years ago

I think I've got the button erasing issue sorted with a fix I was working on for backspacing in unsupported fields, but I'll be sure to keep a look out for this. Thanks for the helpful info!

Mathachew commented 9 years ago

@bill-uncultured I've got a fix, but I'm not ready to push it yet. I'm going to try to work on a new feature to make a 1.8 release, but if I don't get it working soon enough, then I'll put out a 1.7.2 update.

The main issue with pasting is that it didn't factor case, so if you paste 1111a2222b3333c4444d5555e, you'll get the desired auto tabbing result, but pasting 1111A2222B3333C4444D5555E will not. Such a silly mistake really.

Mathachew commented 9 years ago

@bill-uncultured Got a fix out with 1.8.0, but 1.8.1 is what you want to get.

bill-uncultured commented 9 years ago

Thanks for the fix. I still have the button erasing issue, though the rest is fixed.

Mathachew commented 9 years ago

Is the page in question public?

bill-uncultured commented 9 years ago

Here's a code snippet that shows it. There are 2 fields of 5 characters each. If you paste exactly 10 characters, the button gets blanked. If you paste more than 10, characters 11+ overwrite the button text.

<head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://raw.githubusercontent.com/Mathachew/jquery-autotab/1.8.1/js/jquery.autotab.min.js"></script>
</head>
<body>
  <form>
    <input class="keyEntry" type="text" name="key1" id="key1" maxlength="5" size="6" />
    <input class="keyEntry" type="text" name="key2" id="key2" maxlength="5" size="6" />
    <input class="btn-black round-corner-all" value="Submit" tabindex="6" type="submit" />
  </form>
  <script>
$.autotab({ tabOnSelect: true });
$('.keyEntry').autotab('filter', { format: 'alphanumeric', uppercase: true});
  </script>
</body>
</html>
Mathachew commented 9 years ago

Thanks. I'll tinker with this tonight.

bill-uncultured commented 9 years ago

I've temporarily worked around this by adding a hidden button after the text fields, to absorb the overflow from the paste.

bill-uncultured commented 9 years ago

This only happens when the button is an <input>. Maybe you need to ignore <input> where type is not text? These have the bug: <input value="Submit" type="submit" /> <input value="Submit" type="button" /> But this does not: <button type="submit">Submit</button> Still happens in 1.9.0