新規投稿
フォローする

確認ダイアログのカーソル移動について

初心者投稿失礼いたします。

諸先輩方のお知恵を拝借したいと思い投稿させていただきました。

ルックアップのクリアを押したときなどに表示される確認ダイアログは「tabキー」や「カーソルキー」などを受け付けてくれません。

キャンセルかOKかをマウスで選択しなければなりませんが、これらをカーソルキーで選択できるような方法はありませんでしょうか?

 

 

0

4件のコメント

Avatar
mls-hashimoto

言われてみればと思ったので少し触ってみました。

ルックアップをクリアする時の「キャンセル」「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により編集されました
1
Avatar
やるしかないんだ!

mls-hashimoto 様

早速のご教授ありがとうございました。

実装してみたところOKボタンにフォーカスさせることができました。

マウス操作が煩わしいという意見が多く大変助けになりました。

OK、キャンセルがカーソルで移動できるようになれば選択の範囲は広がるのですがキャンセルはあまりしないのでありがたく利用させていただきます。

この場を借りてお礼申し上げます。

 

 

0
Avatar
mls-hashimoto

やるしかないんだ! さま

「キャンセル」「OK」でのフォーカス移動ということでしょうか?Tab(次に進む)とShift+Tab(前に戻る)で可能かと思いますが、カーソルキーでの移動については、本来kintoneには機能として存在しないはずです。TISさまが公開されているプラグイン等でしょうか?

0
Avatar
やるしかないんだ!

mls-hashimoto 様

返答ありがとうございました。

Tab(次に進む)とShift+Tab(前に戻る)できることは確認いたしました。

TIS様のカーソルキー移動プラグインを使用している状態ですが、ダイアログは未対応でした。

老若男女、PC、タブレット、さらにはRPAといろいろな環境で操作するので要望に応えていくには苦労します^^;

またご教授いただきたいことがありましたらよろしくお願いいたします。

 

 

 

0
サインインしてコメントを残してください。