How to pragmatically populate fields on which autotab is enabled?

[goosechaser]

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.

[Mathachew]

Autotab has two global methods, $.autotab.next() and $.autotab.previous(). These two methods trigger the autotab-next and autotab-previous events on document.activeElement, which is the text box that has focus. Does that help?

[goosechaser]

Thanks, but that didn't help. I have 4 fields (credit card number) and I need to be able to paste into the first field and have it autotab and carry on to the other 3. I solved it by splitting the number in chunks and assigning them to each of the fields. However, it'd be great if there was an autotab method to do that.

[Mathachew]

As of v1.3, Autotab supports pasting, which was vastly improved in v1.4. Does it not work for you?

[goosechaser]

Pasting works but how would one do it programatically?

[Mathachew]

Ahh, I see. I'm not sure you can paste without direct input from your keyboard.

[goosechaser]

Exactly. Instead, there could be an option to "assign" a value to first input and automatically "autotab" to the next until the end of the value length.

Here's my solution that does the trick:

creditcardNumber = "1111222233334444".match(/.{1,4}/g);
for (i in creditcardNumber) {
    $("input.creditcardNumber:eq("+i+")").val(creditcardNumber[i]);
}

It'd be great to have something like:

$("input.creditcardNumber:first").autotab({assign: "1111222233334444"})

[Mathachew]

It's certainly doable, but I'm not sure if it's really something that should be included in the scope of what Autotab aims to achieve, so I'll have to mull this over.

[goosechaser]

OK, just an idea.

Also, since I was splitting the number into 4 boxes, I need a way to evaluate the final combined number. Here's my code for those who may be interested:

<input type="hidden" id="creditcardNumber">
<input type="text" class="creditcardNumber">
<input type="text" class="creditcardNumber">
<input type="text" class="creditcardNumber">
<input type="text" class="creditcardNumber">

$('.creditcardNumber').autotab({ maxlength: 4, format: "number" });
$(document).on('input paste', '.creditcardNumber', function() {
    setTimeout(function() {
        var creditcardNumber = $('.creditcardNumber')
                                .map(function(idx, elem) { 
                                    return $(elem).val(); 
                                 })
                                .get()
                                .join("");
        $("#creditcardNumber").val(creditcardNumber).keyup();
    }, 500);    
})

This basically takes the value of all 4 input fields, combines it together and assigns it to the hidden input element for further validation/etc.

[Mathachew]

I can see combining the values into a single hidden element a useful feature. Something else to mull over!