テキスト領域検査 Widget の概要と構造
Spry テキスト領域検査 Widget は、ユーザーが文をいくつか入力したときに有効か無効かを表示するテキスト領域です。 必須フィールドであるテキスト領域にユーザーが何もテキストを入力していない場合は、値が必須であることを示すメッセージが返されます。
さまざまな状態のテキスト領域検査 Widget の例を次に示します。
- A.
- 入力可能な残り文字数カウンタ
- B.
- フォーカスがあるときのテキスト領域 Widget、最大文字数状態
- C.
- フォーカスがあるときのテキスト領域 Widget、有効状態
- D.
- テキスト領域 Widget、必須状態
- E.
- 入力文字数カウンタ
テキスト領域検査 Widget には、有効、無効、必須などのいくつかの状態が含まれます。 これらの状態のプロパティは、使用する検査結果に応じて、プロパティインスペクタで変更できます。 検査が実行されるタイミングは、さまざまに設定できます。たとえば、ユーザーが Widget の外側をクリックしたとき、入力したとき、フォームを送信しようとしたときなどに設定できます。
- 初期状態
- ページがブラウザに読み込まれたとき、またはユーザーがフォームをリセットしたとき。
- フォーカス状態
- ユーザーが Widget に挿入ポイントを置いたとき。
- 有効状態
- ユーザーが情報を正しく入力し、フォームを送信できる状態になったとき。
- 必須状態
- ユーザーがテキストを何も入力していないとき。
- 最小文字数状態
- ユーザーが入力した文字数がテキスト領域の最小文字数に満たないとき。
- 最大文字数状態
- ユーザーが入力した文字数がテキスト領域の最大文字数を超えているとき。
ユーザーとのインタラクションの中で、テキスト領域検査 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。 たとえば、ユーザーがフォームを送信しようとしたときにテキスト領域にテキストが入力されていない場合は、「値を指定する必要があります。」というエラーメッセージを表示するクラスが Widget に適用されます。 エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する "SpryValidationTextarea.css" ファイルに存在します。
テキスト領域検査 Widget のデフォルト HTML コードは、通常はフォームの内部に配置され、コンテナ span タグで構成されます。このタグはテキスト領域の textarea タグを囲みます。 テキスト領域検査 Widget の HTML コードには、ドキュメントのヘッド内とこの Widget の HTML コードの後の script タグも含まれます。
テキスト領域検査 Widget の HTML コードには、ドキュメントのヘッド内とこの Widget の HTML コードの後の script タグも含まれます。 Widget コードの後の script タグは、テキスト領域をインタラクティブにする JavaScript オブジェクトを作成します。
テキスト領域検査 Widget の HTML コードを次に示します。
<head>
...
<!-- Link the Spry Validation Text Area JavaScript library -->
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<!-- Link the CSS style sheet that styles the widget -->
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<!-- Create the text area widget and assign a unique id-->
<span id="sprytextarea1">
<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
<!--Display an error message-->
<span class="textareaRequiredMsg">A value is required.</span>
</span>
</form>
<!-- Initialize the Validation Text Area widget object-->
<script type="text/javascript">
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
</script>
</body>
このコードでは、new JavaScript の演算子によって、テキスト領域 Widget オブジェクトが初期化され、span コンテンツが sprytextarea1 の ID を使用して静的 HTML コードからインタラクティブなページエレメントに変換されます。
Widget 内のエラーメッセージの span タグでは、CSS クラスが適用されています。 このクラス (デフォルトでは display:none; に設定されています) は、エラーメッセージのスタイルと表示状態を制御し、対応する "SpryValidationTextarea.css" ファイルに存在します。 Widget がユーザーとのインタラクションの結果としてさまざまな状態を入力した場合、Spry は Widget のコンテナにさまざまなクラスを配置し、それによってエラーメッセージクラスに影響を与えます。
その他のエラーメッセージをテキスト領域検査 Widget に追加するには、エラーメッセージのテキストを保持する span タグ (またはその他の種類のタグ) を作成します。 次に、CSS クラスを適用することにより、Widget の状態に応じて、メッセージの表示、非表示を切り替えることができます。
デフォルトのテキスト領域検査 Widget の状態の外観は、"SpryValidationTextarea.css" ファイル内の対応する CSS ルールを編集することで変更できます。 たとえば、状態の背景色を変更するには、スタイルシートで対応するルールを編集するか (まだルールが存在しない場合は) 新しいルールを追加します。
テキスト領域 Widget 構造に使用されるさまざまなタグ
上の例では、span タグによって Widget の構造が作成されます。
Container SPAN TEXTAREA tag Error message SPAN
ただし、Widget は、ほとんどすべてのコンテナタグを使用して作成できます。
Container DIV TEXTAREA tag Error Message P
Spry では (タグ自体ではなく) タグ ID を使用して Widget が作成されます。 Spry では、エラーメッセージも、エラーメッセージを含めるために使用される実際のタグとは関係のない CSS コードを使用して表示されます。
Widget コンストラクタに渡された ID は特定の HTML エレメントを識別します。 コンストラクタはこのエレメントを検出し、識別されたコンテナ内で対応する textarea タグを見つけます。 コンストラクタに渡された ID が (コンテナタグではなく) textarea タグの ID である場合、コンストラクタは検査トリガを直接 textarea タグに添付します。 ただし、コンテナタグがない場合は、Widget はエラーメッセージを表示できず、さまざまな検査状態によって textarea タグエレメントの外観 (背景色など) だけが変更されます。