入力操作をカスタマイズする

すべての入力ページで form/js/main.js と form/css/addon/input-ux.css を読み込みます。デザイン01の基本レイアウトを維持し、操作時の案内・スマートフォンの入力補助を共通にしています。確認・送信完了・エラーのPHPは共通のままです。

入力とエラーの案内

form/js/validation.js は初回の文字入力中にはエラーを出さず、欄を離れたとき、選択を確定したとき、確認ボタンを押したときに検証します。指摘済みの欄は修正に合わせて更新します。日本語IMEの変換中は検証を保留します。

確認へ進めない場合は、エラーのある項目と移動リンクを導入の後に表示します。要約にフォーカスし、各リンクから修正する入力欄へ移れます。説明とエラーは aria-describedby で紐付けます。商品を1点も選んでいない場合は、商品一覧に選択を促す案内を出します。

条件付きの必須項目、選択肢グループ、添付の件数・サイズは引き続き検証します。添付済みファイルを削除するチェックは、ファイル本体のエラー表示を上書きしません。サーバー側の検証が最終的な判定です。

スマートフォンと文章の入力

form/js/input-ux.js が、未設定のメール・電話・郵便番号などに inputmode や autocomplete を補います。HTMLに明示した属性は優先します。キーボード操作で勝手に次の欄へ移動する処理はありません。

編集できるテキストエリアは内容に合わせて高さが伸びます。元のデザインの高さを下限とし、追加の伸長は画面高の65%・最大520pxを目安に制限します。長文はその先を欄内でスクロールできます。読み取り専用欄は対象外です。maxlength を設定した欄だけ「現在 / 上限」の文字数を表示します。計数単位はHTMLの maxlength と同じUTF-16です。

共通CSSには、モバイルで16px以上の入力文字、押しやすい選択ラベル、フォーカスの枠、fieldsetの最小幅解除を含みます。「動きを減らす」設定時は入力欄の変化を短くします。大きな演出や追従ボタンは追加していません。

郵便番号とページ移動

postal-code.js は、番号が変わったら前の検索を中断し、古い検索結果を反映しません。日本語変換中は入力値を触らず、検索中の手修正や通信失敗時も既存住所を保護します。検索の案内は入力エラーと別に表示します。自動入力の対象は従来どおり postal_code と対応する住所欄です。

離脱警告は初期値・復元値から変更されたときに出します。初期選択されている項目だけでは警告しません。確認へ進む送信は警告の対象外ですが、検証に失敗した場合や戻って再編集した場合は保護を続けます。個人情報をlocalStorage等へ保存する機能は追加していません。

編集場所

要約の外側余白は各デザインで --mf-error-summary-margin を定義できます。既定値は 0 0 32px です。

動作確認

まずは実際のブラウザーで、入力・修正・エラーの案内を確認します。コマンドでの自動検証は制作担当者向けの検証に分けています。

PCと幅320px・375px・768px程度で、文字切れ、横スクロール、メールの修正、選択肢、添付、長文、確認から戻った状態を確認してください。注文用途へCSSを差し替えた場合は写真・数量操作・合計欄も確認します。

設計時の参考：WAI フォームの通知、WAI 入力検証。特定のアクセシビリティ適合レベルを保証する記載ではありません。