Auto tab in JQuery

Question

Hi ,

I have downloaded the autotab.js to my application.And i m trying to use that in my application.

I am having a Form , and i want to auto tab to next input DOM element after filling one input field.ALso that the Form is generated only in the Page so I cannot use the autotab with the Field id as a known factor.How to do so using JQuery.

Answer 1

If you can't add ids to your inputs you need to find different selectors for those attributes. If you are planning to send this data you probably have a name for those tags. Then you can match next input by name using following selector:

$('input[name=nextInputName]')

Otherwise you can always find next element using combination of children() and parent() method calls in order to traverse from current input to another.

I personally think that the simpliest solution would be to assign ids, even in jQuery if you can't do it in HTML and this will make autofocusing easier.

var counter = 0;
$('input').each(function () {
    if (!$(this).attr('id')) {
        $(this).attr('id', 'autofocus' + counter);
        counter += 1;
    }
});

You can change the selector to skip some of the element you don't want to have autofocus feature.

You can then even write down autofocus yourself in few lines:

$('input[id^=autofocus]').keyup(function () {
    if ($(this).val().length === $(this).attr('maxlength')) {
        var id = $(this).attr('id').match(/^autofocus(\d+)$/[1];
        var nextId = Number(id) + 1;
        $('#autofocus' + nextId).focus()
    }
});