focusing on next input (jquery)

Question

I\'ve got four inputs that each take one number. What I want to do is set the focus automatically to the next input once the number has been set. They all have the class \"i

Answer 1

I would suggest setting maxlength as 1 to each textbox and switch to next one once the val.length and the maxlength is same.

DEMO

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

Edit: Spent some time for the following (not fully tested, but basic tests worked fine)

   1. Allowing just numeric chars  
   2. Allow some control like del, backspace, e.t.c
   3. Backspace on empty textbox will move to prev textbox
   4. charLimit var to dynamically decide how many char you want to restrict.

Code:

$(function() {
    var charLimit = 1;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

DEMO

Answer 2

This is the code that complete your all needs.

$(".input").keyup(function(e) {

if (e.which == 8 || e.which == 46){ 
    //backspace / Delete
    $(this).val('');
    $(this).prevAll('input:first').focus();
}
else
{ 
    var spcl_arr = ["~","!","@", "#", "$", "%", "^", "&", "*", "(", ")", "+","-", "=", "." ,"/"];
   if(e.which == 13){ // Enter Kay
      return false;
   }
  else if(jQuery.inArray($(this).val(), spcl_arr) !== -1 ){ 
         $(this).val('');
         $(this).focus();
        return false;
   }else{ 
       var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) { 
             if (this.value.length == this.maxLength) {
                 $(this).next('.input').focus();
             }
        }else{
            $(this).val('');
            $(this).focus();
            return false;
        }
    }
}

});

Answer 3

This works perfectly It also checks if the middle inputs are filled

$(".inputs").keyup( function () {

    if (this.value.length == this.maxLength) {
    var n=$(this).next('.inputs');
    n.focus();
   if(n.val().length==n.prop('maxlength')) n.next('.inputs').focus(); 
    }

});

Answer 4

try this

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input,[tabindex]');
    }
});
$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(document.activeElement) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});

Answer 5

Here is the code I use for making enter key to behave as tab, i.e, focus to next element when pressing the Enter key or focusing previous element when pressing shift+Enter.

1) Essentially:

tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
tabables.eq(index + 1).focus();

2) Here you are a "class" that encapsulates the behaviour, having in mind fordward and backwards and valid focusable elements.

I hope it helps and if some code suits your needs, feel free to adapt to your needs :)

EnterAsTab = function () {
    this.ENTER_KEY = 13;
};

EnterAsTab.prototype.init = function () {
    this.listenOnEnterKey();
};

EnterAsTab.prototype.listenOnEnterKey = function () {

    var me = this;
    $('form input').on('keypress', function (event) {

            if (event.which === me.ENTER_KEY) {

                if (!event.shiftKey)
                    me.findNextFocusableElement(this);
                else
                    me.findPreviousFocusableElement(this);

                event.preventDefault();
            }
        }
    );
};

EnterAsTab.prototype.findNextFocusableElement = function (element) {
    this.findFocusableElement(element, this.increaseIndex);
};

EnterAsTab.prototype.findPreviousFocusableElement = function (element) {
    this.findFocusableElement(element, this.decreaseIndex);
};

EnterAsTab.prototype.findFocusableElement = function (element, callable) {

    var tabables = $("*[tabindex != '-1']:visible");
    var index = tabables.index(element);
    var counter = 1;
    var nextElement = undefined;

    try {

        while (true) {

            if ((nextElement = tabables.eq(index + counter)).length === 0) {
                break;
            }

            if (this.isFocusableElement(nextElement)) {

                var newIndex = callable.call(this, index, counter);
                tabables.eq(newIndex).focus();

                break;
            } else {
                counter++;
            }
        }
    } catch (error) {
        console.log(error);
    }

};

EnterAsTab.prototype.increaseIndex = function (index, counter) {
    return (index + counter);
};

EnterAsTab.prototype.decreaseIndex = function (index, counter) {
    return index - counter;
};

EnterAsTab.prototype.isFocusableElement = function (element) {

    return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 ||
        element.is(':text') ||
        element.is(':checkbox') ||
        element.is(':radio');
};

var enterAsTab = new EnterAsTab();
enterAsTab.init();

Answer 6

This will keep focus on the text box, after using next without naming the class or id.

 $(this).hide();        
 $(this).next().show();
 $('input[type=text]').focus();