冗長なプログラムを綺麗にしたい

Ⅰ.はじめに

<input id="text1" type="text">にフォーカスがある状態でEnterキーを押すと、<input id="text2" type="text">にフォーカスを移動させるプログラムを書いています。

<input id="text2" type="text">の次は<input id="text3" type="text">です。
<input id="text3" type="text">の次は<input id="text1" type="text">に戻ります。

https://jsfiddle.net/66vs2wu5/

HTML
1<input id="text1" type="text" placeholder="1">
2<input id="text2" type="text" placeholder="2">
3<input id="text3" type="text" placeholder="3">

js
1$('#text1').on('keyup', function (e) {
2    if (e.keyCode == 13) {
3        $('#text2').focus();
4    }
5});
6
7$('#text2').on('keyup', function (e) {
8    if (e.keyCode == 13) {
9        $('#text3').focus();
10    }
11});
12
13$('#text3').on('keyup', function (e) {
14    if (e.keyCode == 13) {
15        $('#text1').focus();
16    }
17});

Ⅱ. 実現したいこと

2点あります。

1. 冗長な部分がある

現状、以下のコードはtext1, text2, text3全てほぼ同じ内容であるにも関わらず複数書いているため冗長と感じます。
しかし、どのように書き直せば良いか分かりません。
どのように書けば1つにまとめることができ、汎用性を高める事が出来ますでしょうか？

js
1$('#text1').on('keyup', function (e) {
2    if (e.keyCode == 13) {
3        $('#text2').focus();
4    }
5});

2. 動的要素の追加に対応できない

追加するボタンを押してtext4とtext5の合計2つを追加した後に、text4でEnterキーを押しても反応しません。text1～3は反応します。
コンソールにエラーが出ない為原因がわからずハマっています。
どのようにすれば動的要素の追加に対応できますでしょうか。
https://jsfiddle.net/ukyrmLxh/

HTML
1<button id="button1">追加する</button>
2
3<div id="inputs">
4  <input id="text1" type="text" placeholder="1">
5  <input id="text2" type="text" placeholder="2">
6  <input id="text3" type="text" placeholder="3">
7</div>

js
1let input_text_count = 3;
2
3$('#button1').on('click', function (e) {
4  input_text_count++;
5
6  $("<input>", {
7    type: 'text',
8    id: 'text' + input_text_count,
9    placeholder: input_text_count
10  }).appendTo('#inputs');
11});
12
13$('#text1').on('keyup', function (e) {
14    if (e.keyCode == 13) {
15        $('#text2').focus();
16    }
17});
18
19$('#text2').on('keyup', function (e) {
20    if (e.keyCode == 13) {
21        $('#text3').focus();
22    }
23});
24
25$('#text3').on('keyup', function (e) {
26    if (e.keyCode == 13) {
27        $('#text4').focus();
28    }
29});
30
31$('#text4').on('keyup', function (e) {
32    if (e.keyCode == 13) {
33        $('#text5').focus();
34    }
35});
36
37$('#text5').on('keyup', function (e) {
38    if (e.keyCode == 13) {
39        $('#text1').focus();
40    }
41});

補足情報(言語/FW/ツール等のバージョンなど)

Windows 10 64bit
Chrome 60.0.3112.101（Official Build）（64 ビット）
jQuery 3.1.1（バージョン制約はありません。）

kei344

2017/08/24 18:47

HTML/JavaScriptを質問文に追記ください。

aglkjggg

2017/08/24 18:50

追記しました。

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

回答3件

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<input type="button" id="button1" value="クリック">
15<input id="text1" type="text" placeholder="1">
16<input id="text2" type="text" placeholder="2">
17<input id="text3" type="text" placeholder="3">
18<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
19<script>
20    var i = 4, s = "input[id^=text]";
21    $("#button1").on("click", function () {
22        $("body").append("<input id=text" + i + " type='text' placeholder=" + i + ">\n");
23        i += 1;
24    });
25
26    $(document).on("keyup", s, function (e) {
27        if (e.keyCode === 13) {
28            $(this).attr("id") === $(s).eq(-1).attr("id") ? $(this).prevAll(s).eq(-1).focus() : $(this).nextAll(s).eq(0).focus();
29        }
30    });
31</script>
32</body>
33</html>

投稿2017/08/24 19:21

編集2017/08/24 19:27

s8_chu

総合スコア14731

aglkjggg

2017/08/24 20:05

ご回答ありがとうございます。とてもjQuery感溢れるサンプルで参考になりました。特にprevAll, nextAllは今回始めて知ったので勉強になりました。 prevAll()とlast()で最初の要素を指定する点が新鮮でした＞＜ prevAll, nextAll は Enterキーを押すたびに要素を列挙してそうなので少しコストが高そうかなと感じました。（自分で深く検証を取ってないので、なんとなくですが…）動的要素の追加に対応できない部分については$(document)に対して指定する必要があったのですね。悩んでいた点が解決しました。

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

idに依存せずに処理させたいと自分は思うので
<input focus-order="1" >
<input focus-order="2" >

というふうにorderを振ります。
focus-order属性を持つ要素全てに対してkeyupを割り当てます。
自身のorderを取得し + 1したorderの値を持つdomがあるかを調べます。
あれば[focus-order='次のorder']に対してfocusを与えます。
なければ[focus-order='1']に対してフォーカスを与えます。

投稿2017/08/24 18:53

Tak1016

総合スコア1408

aglkjggg

2017/08/24 19:38 編集

ご回答ありがとうございます。任意の属性を付け加える点参考になりました。また、jQueryのセレクタで属性指定をした経験がなかったので勉強になりました。動作確認も取れました。 https://jsfiddle.net/xju82z3k/ しかし、動的追加を試しましたが動作確認が取れませんでした。 https://jsfiddle.net/q57ubmhu/

aglkjggg

2017/08/24 19:38 編集

失礼しました。以下のように変更した所、動的追加でも動作確認が取れました。 $('[focus-order]').on('keyup', function (e) { ... }); ↓ $(document).on('keyup', '[focus-order]', function (e) { ... }); https://jsfiddle.net/q57ubmhu/1/

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

冗長な部分がある

例えば以下のようにしてみてはどうでしょう。

javascript
1$('#text1 #text2 #text3').on('keyup', function (e) {
2    if (e.keyCode == 13) {
3        var i = Number($(this).attr("id").substr(5,1));
4        var n = (i+1)%3+1;
5        $('#text'+n).focus();
6    }
7});
8

投稿2017/08/24 18:40

KojiDoi

総合スコア13671

kei344

2017/08/24 18:48

「,」が抜けていませんか？

aglkjggg

2017/08/24 19:16

ご回答ありがとうございます。 $('#text1 #text2 #text3') ↓ $('#text1,#text2,#text3') var i = Number($(this).attr("id").substr(5,1)); ↓ var i = Number($(this).attr("id").substr(4,1)); var n = (i+1)%3+1; ↓ var n = ((i+1) > 3)? 1: i+1; に変更した所動作しました。 https://jsfiddle.net/g3rqvued/ また、動的追加を試しましたが動作確認が取れませんでした。 https://jsfiddle.net/p0jgmbxo/

aglkjggg

2017/08/24 20:42 編集

失礼しました。以下のように変更した所、動的追加でも動作確認が取れました。 $('input').on('keyup', function (e) { ... }); ↓ $(document).on('keyup', 'input', function (e) { ... }); ※追記数値が2桁になると正しく動作しませんでした。 var i = Number($(this).attr("id").substr(4, 1)); ↓ var i = Number($(this).attr("id").replace('text', ''); に変更した所正しく動作しました。

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

あなたの回答