Auto tab in JQuery

Question

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.

You probably have a name for those tags if you are planning to send this data. Then you can match the next input by name using following selector:

$('input[name=nextInputName]')

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

I personally think that the simplest solution would be to assign ids, even in jQuery if you can't do it in HTML: this will make auto-focussing 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 elements that you don't want to have the 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()
    }
});

Answer 2

This function read the max length set on a Input. You can call it by using $('input.autotab').autotab();

The jquery function is as follows:

$.fn.autotab = function (){
$(this).keyup(function(e){
        switch(e.keyCode){
                // ignore the following keys
                case 9: // tab
                        return false;
                case 16: // shift
                        return false;
                case 20: // capslock
                        return false;
                default: // any other keyup actions will trigger
                        var maxlength = $(this).attr('maxlength'); // get maxlength value
                        var inputlength = $(this).val().length; // get the length of the text
                        if ( inputlength >= maxlength ){ // if the text is equal of more than the max length
                                $(this).next('input[type="text"]').focus(); // set focus to the next text field
                        }
        }
});

};