テーブル内の日付フィールドで選択しているフィールドの下のフィールドにフォーカスしたい。

テーブル内にある日付フィールドを選択している状態で同じフィールドの下の項目にフォーカスをしたいです。(チェックボックスでも実現したいです。)

現在、矢印期キーを押すことでテーブル内で上下移動を実現しています。
文字列フィールドなどでは実現できていますが、別のフィールドだと挙動がおかしい場合があります。(動作しない、飛び先が可笑しい等)

おそらく日付フィールドだと「input」要素にプライマリーなIDがないため「focus()」で特定できないのが原因だと思われます。(文字列はIDを保持しているため任意の場所にフォーカスが可能。)

解決方法が分かる方がいましたらご教授お願いいたします。
また、下記のソース以外で実現が可能な方法(プラグインや別のコード)があればお手数ですがよろしくお願いいたします。

以下ソースになります。

 

(function ($) {

    “use strict”;

    kintone.events.on([“app.record.create.show”, “app.record.edit.show”], function (event) {

        document.addEventListener(‘keydown’, (event) => {

            var keyname = event.key;

            var focusArea;

            var TABLE_FIELD_CODE = “テーブル”; //テーブルのフィールドコードを記載。

            var FIELD_CODE = “日付”; //テーブル内の該当フィールドのコードを記載。

            //フィールドコードからフィールドIDを取得(例:5940273)

            var field_id = Object.values(

                Object.values(cybozu.data.page.FORM_DATA.schema.subTable).filter((tb) => {

                    return tb.var === TABLE_FIELD_CODE;

                })[0].fieldList

            ).filter((f) => {

                return f.var === FIELD_CODE;

            })[0].id;

            //「↑」を選択時に実行

            if (keyname == ‘ArrowUp’) {

                var current = document.activeElement; //カーソルが選択している項目の要素を取得

                var textArea = $(.field-${field_id} input); //フィールドのdiv内にあるinputを取得(配列)。「field-5940273」はkintoneで付与される項目のプライマリーなクラス名。

                for (var i = 0; i < textArea.length; i++) {

                    if (textArea[i].id == current.id) { //選択している項目の配列番号を検索

                        focusArea = i - 1; //一つ前の配列の番号を取得

                    }

                }

                textArea[focusArea].focus(); //配列番号を指定して、任意の位置にカーソルを動かす

                //「↓」を選択時に実行

            } else if (keyname == ‘ArrowDown’) {

                var current = document.activeElement;

                const textArea = $(.field-${field_id} input);

                for (var i = 0; i < textArea.length; i++) {

                    if (textArea[i].id == current.id) {

                        focusArea = i + 1; //一つ先の配列の番号を取得

                    }

                }

                textArea[focusArea].focus();

            };

        });

    });

})(jQuery);

TISさんのプラグイン
https://www.tis2010.jp/keytransition/

なんていかがでしょうか?

らいとさん、こんにちは。

 

上記のプラグインをはじめに試しましたが、上下移動ができませんでした。

左右というよりかは上下のカーソル移動を実現したいので、他に方法があればご教授願います。

丸山 様

こんにちは。

らいと 様よこから失礼いたします。

 

ソースの中身は見てないですけど、今動作確認したんですけど。

addEventListener("keydown" ,() => {document.querySelector(".value-5537721 input").focus()})

これで、チェックボックスも日付もほぼ全て制御できましたよ。

 

> おそらく日付フィールドだと「input」要素にプライマリーなIDがないため「focus()」で特定できないのが原因だと思われます。(文字列はIDを保持しているため任意の場所にフォーカスが可能。)

たぶん、上記のような心配はないようです。

新屋 様
こんにちは。丸山です。

情報ありがとうござます。
上記のソースで色々試してみました。

前提としてテーブル内で上下のカーソル移動を考えています。
例えば、テーブルに日付フィールドがあり、そのフィールドが5つ(5行)追加されていると仮定します。

フィールドの3行目を選択し、上矢印キーを押します。
押したと同時に2行目のフィールドにカーソルが移動します。
同じように2行目から上矢印キーを押すと1行目に移動します。

上を押したら一段上に、下を押したら一段下に、上下に順々に移動する機能です。

上記のコメントで教えてくださったコードで色々試しましたが、テーブル内だと一番上の日付フィールドが選択されてしまいます。
もしかしたら私の書き方が間違っているかもしれません。

下記に試したソースを載せておきますので、改善できそうであれば教えてくださると助かります。

以上、よろしくお願いいたします。

(function ($) {

    "use strict";

    kintone.events.on(["app.record.create.show", "app.record.edit.show"], function (event) {

        document.addEventListener('keydown', (event) => {

            var keyname = event.key;

            //「↑」を選択時に実行

            if (keyname == 'ArrowUp') {

                document.querySelector(".value-5520480 input").focus()

                console.log("上");

                //「↓」を選択時に実行

            } else if (keyname == 'ArrowDown') {

                document.querySelector(".value-5520480 input").focus()

                console.log("下");

            };

        });

    });

})();

丸山 様

こんにちは。

 

サブテーブルの話なんですね。

とういうか、セレクターをなんとなく理解されてると思ってお伝えしたんですけど、適切なセレクターの値を入れれば日付だろうと、チェックボックスだろうとfocusできますよ。

と言うお話なんですよ。

 

勘違いさせて大変申し訳ないですけど、“.value-5520480 input” で全て解決しますよという話ではないです。

わかりづらくて申し訳ないです。

 

いちようバグ残してですけど、さっと作ったサンプル置いておきますね。

あとはサブテーブル以外もとか要望があったとしても、そちらで考えて実装してみてください。

使い方は、対象のサブテーブルのフィールドコードと".subtable-row-XXXXXX input"の XXXXXXの部分を適切な値に変更して利用してみてください。

※ 見ていても見ていなくても、以下は週明けに消すと思います。バグがあるので。

(function () {
  "use strict";
  const events = ["app.record.create.show", "app.record.edit.show"];
  kintone.events.on(events, function (event) {
    const tabeleCode = "subTable"; // サブテーブルのフィールドコードを入力
    const target = document.querySelectorAll(".subtable-row-XXXXXX input"); // サブテーブルのクラスを適切なものに替える
    const col = target.length / event.record[tabeleCode].value.length;

    [...target].map((input) => {
      input.addEventListener("keydown", function (event) {
        const active = document.activeElement;
        const index = [...target].indexOf(active);
        switch (event.key) {
          case "ArrowUp":
            target[index - col].focus();
            break;
          case "ArrowDown":
            target[index + col].focus();
            break;
        }
      });
    });
    return event;
  });
})();

新谷様
こんにちは。

わたくしの方プログラムに関しては未熟なものですみません。
上記の説明とサンプルで大分理解できそうです。

貴重なお時間ありがとうございました。
参考にしながら勉強させていただきます。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。