JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="id_1" data-id="1" value="0"><br>
<input type="text" id="id_2" data-id="2" value="0"><br>
<input type="text" id="id_3" data-id="3" value="0"><br>
<input type="text" id="id_4" data-id="4" value="0"><br>
<input type="text" id="id_5" data-id="5" value="0"><br>
JavaScript
$(function() {
$('input').live('keydown', function(e) {
switch(e.keyCode)
{
case 13:
alert('enter!');
var next_input = $('#id_' + ($(this).data('id')*1 + 1));
if(!$(this).input_ok()) {
$(this).focus();
}
else {
if($(next_input).length) {
$(next_input).focus();
}
}
e.preventDefault();
e.stopPropagation();
break;
}
})
.live('blur', function() {
if(!$(this).input_ok()) {
alert('blur!');
$(this).focus();
return false;
}
});
$.fn.input_ok = function() {
if(!/^\d+$/.test($(this).val())) {
alert('Bad Value!');
return false;
}
return true;
};
});