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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について