focusing on next input (jquery)
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
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();
}
});