JavaScript

フォームのイベントに応答する

JavaScript を使用して、フォームでのユーザー操作に応答したり、追加のフォーム フィールドを表示したり、フォームを送信したりできます。

ユーザーが追加のフォーム コントロールを入力するのをサポートする

アンケート フォームを作成したとします。ユーザーが 1 つのオプションを選択したら 選択内容に関連する具体的な質問をするために、追加の <input> を表示したい。 適切な <input> 要素のみを表示するには、どうすればよいでしょうか。

JavaScript を使用して <input> を表示できるのは、関連付けられている <input type="radio"> が現在選択されている場合のみです。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

それでは デモの JavaScript コード aria-controls 属性と aria-expanded 属性に気づいたでしょうか。 使用する ARIA 属性 追加のフォーム コントロールの表示と非表示の状態をスクリーン リーダーのユーザーが把握できるようにします。

ユーザーがページから離れずにフォームを送信できるようにする

コメント フォームがあるとします。読者がコメントを追加してフォームを送信すると ページを更新せずにコメントをすぐに確認できれば理想的です。

そのためには、onsubmit イベントをリッスンしてから、event.preventDefault() を使用してデフォルトの動作を回避します。 Fetch API を使用して FormData を送信します。

対応ブラウザ

  • Chrome: 42。 <ph type="x-smartling-placeholder">
  • Edge: 14。 <ph type="x-smartling-placeholder">
  • Firefox: 39。 <ph type="x-smartling-placeholder">
  • Safari: 10.1。 <ph type="x-smartling-placeholder">

ソース

バックエンド スクリプトは、POST リクエストがブラウザからのものであるかどうかを確認できます （method="post" の場合はフォーム要素の action 属性を使用）、JavaScript の場合は、 たとえば fetch() リクエストなどです。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

動的なコンテンツの変更をスクリーン リーダーのユーザーに必ず通知する。 aria-live="polite" 属性を持つ要素を HTML に追加します。 変更後に要素のコンテンツを更新します。 たとえば、ユーザーがコメントを送信したら、テキストを「コメントを投稿しました」に更新します。

詳しくは、ARIA のライブ リージョンをご覧ください。

JavaScript による検証

エラー メッセージがサイトのスタイルやトーンに合っていることを確認する

デフォルトのエラー メッセージの表現はブラウザによって異なります。 すべてのユーザーに同じメッセージが表示されるようにするには メッセージがサイトのスタイルやトーンに合っていることを確認します。 setCustomValidity() を使用する Constraint Validation API のメソッド 独自のエラーメッセージを定義します

エラーがユーザーにリアルタイムで通知されるようにする

フォーム検証用の組み込みの HTML 機能はユーザーへの通知に最適 データをバックエンドに送信する前に、無効なフォーム フィールドに関する情報を入手できます。 ユーザーがフォームのフィールドを離れたらすぐに通知できれば便利ではないでしょうか。

アテンション機構の blur これは要素のフォーカスを喪失したときに起動され、 フォーム コントロールが無効なかどうかを検出する ValidityState インターフェース。

ユーザーが入力したパスワードが見えるようにする

<input type="password"> に入力したテキストはデフォルトで非表示になっています。 ユーザーのプライバシーを尊重するため 入力したテキストの表示 / 非表示を切り替える <button> を表示して、ユーザーがパスワードを入力しやすくします。

デモをお試しください。[ パスワードを表示 <button> を使用して、入力したテキストの公開設定を指定します。 このプログラムの仕組みを見てみましょう。[Show Password]をクリックすると パスワード フィールドの type 属性を type="password" から type="text" に変更します。 <button> のテキストが「Hide Password」に変わります。

[Show Password] ボタンにアクセスできるようにすることが重要です。 aria-controls 属性を使用して <button> を <input type="password"> に接続します。

パスワードが現在表示されているか非表示にしているかをスクリーン リーダーのユーザーに通知するには、 aria-live="polite" で隠し要素を使用し、それに応じてテキストを変更します。 パスワードが自分の画面を見ている他のユーザーに対して表示されるときに、スクリーン リーダーのユーザーがそれを把握できるようにすることが重要です。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

詳しくは、show password オプションの実装をご覧ください。

リソース