jQueryで入力後自動フォーカス
指定入力後、次入力欄にフォーカス移動
jQuery
$(function () {
// 1
$('input[name=serial1]').on('change keyup', function(){
// 半角数字4文字入力
if ($(this).val().match(/^[0-9]{4}$/)) {
// 数字限定せず4文字入力の場合
// if ($(this).val().length == 4) {
// 次入力欄にフォーカス移動
$('input[name=serial2]').focus();
}
});
// 2
$('input[name=serial2]').on('change keyup', function(){
if ($(this).val().match(/^[0-9]{4}$/)) {
$('input[name=serial3]').focus();
}
});
// 3
$('input[name=serial3]').on('change keyup', function(){
if ($(this).val().match(/^[0-9]{4}$/)) {
$('input[name=serial4]').focus();
}
});
// 4
$('input[name=serial4]').on('change keyup', function(){
if ($(this).val().match(/^[0-9]{4}$/)) {
// フォーカスを外す
$(this).blur();
}
});
});
HTML
<form>
<input type="text" name="serial1" maxlength="4" pattern="[0-9]{4}">-
<input type="text" name="serial2" maxlength="4" pattern="[0-9]{4}">-
<input type="text" name="serial3" maxlength="4" pattern="[0-9]{4}">-
<input type="text" name="serial4" maxlength="4" pattern="[0-9]{4}">
</form>
サンプル
