テーブル内にある日付フィールドを選択している状態で同じフィールドの下の項目にフォーカスをしたいです。(チェックボックスでも実現したいです。)
現在、矢印期キーを押すことでテーブル内で上下移動を実現しています。
文字列フィールドなどでは実現できていますが、別のフィールドだと挙動がおかしい場合があります。(動作しない、飛び先が可笑しい等)
おそらく日付フィールドだと「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);