buttonのclick Enterキーでも同じ処理を実行させたい

実現したいこと

jQuery
1$('#button').on('click',function(){
2　入力チェック処理
3　・
4　・
5　送信
6}

上記のような、入力フォームの「入力チェック～送信」までの処理を
以下のような場合に実行させたいです。。

①「表示ボタン」（type="button"）がクリックされたとき
②Enterキーでinputを順番に進めていき、
「表示ボタン」（type="button"）をkeydownしたとき

発生している問題

①の時は、問題無く処理実行されるのですが、
②の時が、処理実行されません。。。

該当のソースコード

jQuery
1    $(function(){
2        $('input[type=text]:first').focus();
3        $('#button').on('click',function(e){
4            //入力チェック
5            let isEmpty = false;
6            $('.name, .code').each(function(){
7                if($(this).val() == ""){
8                    return true;
9                }
10                else if($(this).val().match(/^[ 　\r\n\t]*$/)){
11                    alert("スペースのみを入力することはできません");
12                    $(this).select();
13                    isEmpty = true;
14                    return false;
15                }
16            });
17            if(isEmpty)
18                return false;
19            else{
20                tableupdate("user_data/");
21            }
22        })
23　　　　//Enterキーで次のinputに進める処理
24        $('input').bind("keydown", function(e) {
25            var n = $("input").length;
26            //13=エンターkey
27            if (e.which == 13)
28            {
29                e.preventDefault();
30                var nextIndex = $('input').index(this) + 1;
31                if(nextIndex < n) {
32                    //次のやつにfocus        
33                    $('input')[nextIndex].focus();
34                } else {
35                    //最後のやつなので#buttonをクリック        
36                    $('input')[nextIndex-1].blur(); 
37                    $('#button').trigger('click');
38                }
39            }
40        });
41    });

どこ・・・

処理の書く位置が悪いのでしょうか・・・
原因が分かる方、教えて下さい。。。。

m.ts10806

2019/10/30 05:25

e.whichのいみを分かって使ってますか？

xx_6_6_xx

2019/10/30 05:28

キーに割り当てられたコードを取得するものではないですか？；；

m.ts10806

2019/10/30 05:34

console.log()で出力してみればわかるかと。「何も起きない」のは状況的に２パターンしかありません

xx_6_6_xx

2019/10/30 05:47

console.logでも13が出力されました。。こういう時に使うものではないのでしょうか。。。？？質問ばかりですみません。。。

m.ts10806

2019/10/30 06:18

では、そのあとのいくつかある分岐でどこを通っているかconsole.logで確認してみてください。「処理実行されない」のでしたらどこか抜けてるので「とにかく処理を起こさせる」ことで問題切り分けを行いましょう

xx_6_6_xx

2019/10/30 06:50

console.log('aaa')とかにして、まずは通るかどうか確認するのが先ということですね；；

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2$(function(){
3  $('input').on('keydown',function(e){
4    if(e.which==13){ // キー入力がエンターだった場合
5      var inp=$(this).closest('form').find('input'); // input要素を全部掴んで
6      var next=inp.index(this)+1; // 自分が何番目か数え1を足したのが次の要素
7      if(inp.length<=next) next=0; 
8      // 次要素のindexがinpの要素数を超えたらオーバーフローするのでindexを0に戻す
9      inp.eq(next).trigger('focus'); // 次要素(inp.eq(next))にフォーカスを当てる
10    }
11  })
12    $('#button').on('click',function(){
13    console.log('button click');
14  });
15});
16</script>
17<form>
18<input type="text">
19<input type="text">
20<input type="button" id="button" value="button">
21<input type="text">
22</form>