jQuery UI DatepickerでEnterキーを無効化する方法

jQuery UIのDatepickerの入力欄で Enterキーが押されたときの挙動 が問題になるケースがあります。フォーム内で使用している場合、Enterキーによって意図せずフォームが送信されてしまうことがあるからです。 問題の背景 jQuery UIのDatepickerは、インラインカレンダーまたはテキスト入力で日付を選択できる便利なUIコンポーネントです。しかし、入力欄にフォーカスがあり、ユーザーがEnterキーを押すと、以下のような問題が発生することがあります。 フォームが送信されてしまう カレンダーが閉じてしまう(意図せず選択が確定する) 入力値のバリデーションが発動する これらの挙動を防ぐには、 Enterキーの動作を抑制 する必要があります。 解決方法:keydownイベントでEnterキーをキャンセルする もっともシンプルな方法は、 keydown イベントを使って、Enterキー(キーコード13)を検知し、既定の動作をキャンセルすることです。 以下は具体的なコード例です。 $('#datepicker').datepicker(); // Enterキーを無効化 $('#datepicker').on('keydown', function (e) { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); return false; } }); このスクリプトは、Datepickerがアタッチされた #datepicker 要素に対して、Enterキーの押下を検出し、 e.preventDefault() と return false でその動作をブロックしています。 他の入力欄に影響しないようにするには この方法は特定のDatepicker入力欄にのみ適用されます。もし複数の入力欄があり、特定のものだけEnterキーを無効化したい場合は、 セレクタで対象を限定 してください。 $('.date-only').datepicker().on('keydown', function (e) { if (e.k...