初心者投稿失礼いたします。
諸先輩方のお知恵を拝借したいと思い投稿させていただきました。
ルックアップのクリアを押したときなどに表示される確認ダイアログは「tabキー」や「カーソルキー」などを受け付けてくれません。
キャンセルかOKかをマウスで選択しなければなりませんが、これらをカーソルキーで選択できるような方法はありませんでしょうか?
初心者投稿失礼いたします。
諸先輩方のお知恵を拝借したいと思い投稿させていただきました。
ルックアップのクリアを押したときなどに表示される確認ダイアログは「tabキー」や「カーソルキー」などを受け付けてくれません。
キャンセルかOKかをマウスで選択しなければなりませんが、これらをカーソルキーで選択できるような方法はありませんでしょうか?
言われてみればと思ったので少し触ってみました。
ルックアップをクリアする時の「キャンセル」「OK」はそれぞれ属性のないa要素で、何らかの属性(hrefかtabIndex)がないとフォーカス対象にならないのでこれを追加する必要があり、その上でa要素の実際の位置はルックアップフィールドとは繋がっていない(tabキー押下でフォーカスが当たるのは最も下のフィールドの次)のでfocus()をさせると良さそうです。
同様にa要素のクリックイベントで元の「クリア」にフォーカスが当たるようにすればキーボードのみで操作できそうですが、ルックアップに関連するフィールドのchangeイベントでフォーカスが変わるカスタマイズがある場合、setTimeoutの数値を変えるか別の対策が必要です。
これらをルックアップのクリアをクリックする時のイベントに指定し、setTimeoutで実行すれば良さそうですね。当然ですがkintoneのクラス名を取得するDOM操作になるので、アップデートに伴うデザインの変更等で対応が必要になります。
{
kintone.events.on([
'app.record.create.show', 'app.record.edit.show'
], (event) => {
[...document.getElementsByClassName('input-clear-gaia')].forEach((button) => {
button.onclick = () => {
setTimeout(() => {
[...document.getElementsByClassName('removelink-confirm-btn-cybozu')].forEach((a) => {
a.setAttribute('href', '#');
a.onclick = () => {
setTimeout(() => {
button.focus();
}, 0);
};
});
document.getElementsByClassName('removelink-confirm-btn-cybozu')[1].focus(); // キャンセルにフォーカスを当てる場合は1を0に
}, 0);
};
});
return event;
});
};
mls-hashimoto 様
早速のご教授ありがとうございました。
実装してみたところOKボタンにフォーカスさせることができました。
マウス操作が煩わしいという意見が多く大変助けになりました。
OK、キャンセルがカーソルで移動できるようになれば選択の範囲は広がるのですがキャンセルはあまりしないのでありがたく利用させていただきます。
この場を借りてお礼申し上げます。
やるしかないんだ! さま
「キャンセル」「OK」でのフォーカス移動ということでしょうか?Tab(次に進む)とShift+Tab(前に戻る)で可能かと思いますが、カーソルキーでの移動については、本来kintoneには機能として存在しないはずです。TISさまが公開されているプラグイン等でしょうか?
mls-hashimoto 様
返答ありがとうございました。
Tab(次に進む)とShift+Tab(前に戻る)できることは確認いたしました。
TIS様のカーソルキー移動プラグインを使用している状態ですが、ダイアログは未対応でした。
老若男女、PC、タブレット、さらにはRPAといろいろな環境で操作するので要望に応えていくには苦労します^^;
またご教授いただきたいことがありましたらよろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。