HTML date Enter制御について

Question

実現したいこと

上記の画像でYYYY(2026)の地点でENTERキーを押すと、MM,DD,カレンダーマーク,実行ボタンの順にフォーカスしたいです。(つまり、Tabと同じ機能を実現したいです。)

現状は、YYYYの後にENTERキーを押すと実行ボタンにフォーカスしています。

発生している問題・分からないこと

4.10.5.1.7 Date state (type=date)から、YYYY → MM → DD→カレンダマーク→実行ボタンフォーカス制御は、この仕様からも不可能ということでしょうか？

該当のソースコード

document.addEventListener("DOMContentLoaded", () => {
 
        const radioBtn = document.getElementById("radioBtn");// ラジオボタン
        const settingDate = document.getElementById("setting_date"); // カレンダ
        const executeBtn = document.getElementById("executeBtn");//実行ボタン
      
        radioBtn.addEventListener("keydown", e => {
            if (e.key === "Enter") {
                e.preventDefault();
                settingDate.focus();
            }
            console.log("settingDate",settingDate.value) //2026-02-23と表示。
        });
       
        // YYYYのあと、MMにフォーカス当てるようにしたい。
        settingDate.addEventListener("keydown", e => {
            if (e.key === "Enter") {
                e.preventDefault();
                executeBtn.focus();
            }
        });
    });
    </script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

①date型ではなく、text型にしたらYYYY,MM,DD順にフォーカスできる
→text型にしたらカレンダマークが表示されないので期待値ではありません。
②JSのdatepickerで対応することも考えています。

補足

特になし

Comments

[otn]

「何故その要件が必要だと思ったのか」を掘り下げると別のより良い解決がありそうな気がします。
現行システムがあって、いくら手間をかけてもいいのでそれと何から何までそっくりに作るという縛りでの話ならしょうがないですが。

Answer 1

type="date"はブラウザネイティブのUIコンポーネントで、キャレット位置などの情報は JavaScriptから取得できない仕様のようです。（selectionでselectionStartなども拾えないし、sendkeysすることもできなそう）
命題の機能実装がマストであれば、type="date"はあきらめて、主要なライブラリで実装されているdatepickerをご利用になってください。
逆にエンターにあまり特殊な機能を割り当てるのはユーザビリティを下げるのでほどほどにした方がよいかと。