Dreamweaver での Spry テキストエリア検証 Widget の使用

検索
注意：

Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。

テキストエリア検証 Widget について

Spry テキストエリア検証 Widget は、ユーザーが文をいくつか入力したときに有効か無効かを表示するテキストエリアです。必須フィールドであるテキストエリアにユーザーが何もテキストを入力していない場合は、値が必須であることを示すメッセージが返されます。

次にテキストエリア検証 Widget の例を示します。この例では有効状態を示しています。

様々な状態のテキストエリア検証 Widget

A. 入力可能な残り文字数カウンター B. フォーカスがあるときのテキストエリア Widget、最大文字数状態 C. フォーカスがあるときのテキストエリア Widget、有効状態 D. テキストエリア Widget、必須状態 E. 入力文字数カウンター 

テキストエリア検証 Widget には、有効、無効、必須などのいくつかの状態が含まれます。これらの状態のプロパティは、使用する検証結果に応じて、プロパティインスペクターで変更できます。検証が実行されるタイミングは、例えばユーザーが Widget の外側をクリックしたとき、入力したとき、フォームを送信しようとしたときなど様々に設定できます。

イニシャル状態

ページがブラウザーに読み込まれたとき、またはユーザーがフォームをリセットしたときの Widget の状態。

フォーカス状態

ユーザーが挿入ポイントを置いたときの Widget の状態。

有効状態

ユーザーが情報を正しく入力し、フォームを送信できる状態になったときの Widget の状態。

必須状態

ユーザーがテキストを入力していないときの Widget の状態。

最小文字数状態

ユーザーが入力した文字数がテキストエリアの最小文字数に満たなかったときの Widget の状態。

最大文字数状態

ユーザーが入力した文字数がテキストエリアの最大文字数を超えていたときの Widget の状態。

ユーザーとのインタラクションの中で、テキストエリア検証 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。例えば、ユーザーがフォームを送信しようとしたときにテキストエリアにテキストが入力されていない場合は、「値を指定する必要があります。」というエラーメッセージを表示するクラスが Widget に適用されます。エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する SpryValidationTextArea.css という CSS ファイルに存在します。

テキストエリア検証 Widget の初期設定 HTML は、通常はフォームの内部に配置され、テキストエリアの <textarea> タグを囲むコンテナ <span> タグで構成されます。テキストエリア検証 Widget の HTML には、ドキュメントの head 内とこの Widget の HTML マークアップの後の script タグも含まれます。

テキストエリア検証 Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_sprytextarea_jp を参照してください。

テキストエリア検証 Widget の挿入と編集

テキストエリア検証 Widget の挿入

  1. 挿入／Spry／Spry テキストエリア検証を選択します。
  2. Input タグのアクセシビリティ属性ダイアログボックスに情報を入力し、「OK」をクリックします。
注意：

挿入パネルの「Spry」カテゴリを使用してテキストエリア検証 Widget を挿入することもできます。

検証を実行するタイミングの指定

検証がどの時点で実行されるかを指定できます。指定できるのは、ユーザーが Widget の外側をクリックしたとき、ユーザーが入力すると同時、またはユーザーがフォームの送信を試みたときのいずれかです。

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、検証をどの時点で行うかを指定する「検査日」オプションを選択します。すべてのオプションを選択することも、「送信」のみを選択することもできます。

    onBlur

    ユーザーがテキストフィールドの外側をクリックしたときに常に検証します。

    onChange

    ユーザーがテキストフィールド内でテキストを変更したときに検証します。

    onSubmit

    ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。

最小および最大文字数の指定

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「最小文字数」または「最大文字数」ボックスに数字を入力します。例えば、「最小文字数」ボックスに「20」と入力すると、ユーザーがそのテキストエリアに 20 文字以上入力した場合にのみ入力が受け入れられます。

文字カウンターの追加

ユーザーが何文字入力したかを知ることができる文字カウンター、またはそのテキストエリアの入力文字数が残り何文字かを知ることができる文字カウンターを追加できます。初期設定では、文字カウンターを追加すると、Widget の右下隅にカウンターが表示されます。

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「文字数カウント」または「残りの文字数」オプションを選択します。
    注意：

    「残りの文字数」オプションは、最大文字数を設定してある場合にのみ選択可能になります。

デザインビューでの Widget の状態の表示

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、有効状態でこの Widget を表示する場合は「有効」を選択します。

テキストエリアの必須状態の変更

初期設定では、Dreamweaver で挿入したテキストエリア検証 Widget を Web ページ上にパブリッシュすると、ユーザー入力が必須になります。ただし、テキストエリアの検証をオプションにすることもできます。

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「必須」チェックボックスを必要に応じてオンまたはオフにします。

テキストエリアのヒントの作成

入力する情報の種類をユーザーに知らせるため、テキストエリアに「ここに説明を入力します」などのヒントを追加できます。ユーザーがブラウザーでページを読み込むと、テキストエリアにこのヒントが表示されます。

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「ヒント」テキストボックスにヒントを入力します。

余分な文字のブロック

ユーザーが、テキストエリア検証 Widget の最大文字数を超える文字を入力するのを防止できます。例えば、最大文字数が 20 文字に設定された Widget にこのオプションを選択すると、ユーザーはこのテキストエリアに 20 字を超えて入力できなくなります。

  1. ドキュメントウィンドウでテキストエリア検証 Widget を選択します。
  2. プロパティインスペクター（ウィンドウ／プロパティ）で、「余分な文字をブロック」オプションを選択します。

テキストエリア検証 Widget のカスタマイズ

プロパティインスペクターでは、テキストエリア検証 Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。テキストエリア検証 Widget の CSS を変更すると、自由にスタイル設定した Widget を作成できます。高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_sprytextarea_custom_jp を参照してください。

次のトピックに登場する CSS ルールは、すべて SpryValidationTextArea.css ファイルに格納された初期設定ルールです。Spry テキストエリア検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryValidationTextArea.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。

注意：

テキストエリア検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して Widget の CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。

テキストエリア検証 Widget のエラーメッセージのテキストのスタイル設定

テキストエリア検証 Widget のエラーメッセージは、初期設定では、1 ピクセルのボーダーで囲まれた赤いテキストで表示されます。

  1. テキストエリア検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、独自のテキストスタイルプロパティと値を追加します。

    変更するテキスト

    関連する CSS ルール

    変更する関連プロパティ

    エラーメッセージのテキスト

    		 .textareaRequiredState .textareaRequiredMsg、.textareaMinCharsState .textareaMinCharsMsg、.textareaMaxCharsState .textareaMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

テキストエリア検証 Widget の背景色の変更

  1. 様々な状態のテキストエリア検証 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定の背景色値を変更します。

    変更する背景色

    関連する CSS ルール

    変更する関連プロパティ

    有効状態の Widget の背景色

    		 .textareaValidState textarea、textarea.textareaValidState

    background-color: #B8F5B1;

    無効状態の Widget の背景色

    		 textarea.textareaRequiredState、.textareaRequiredState textarea、textarea.textareaMinCharsState、.textareaMinCharsState textarea、textarea.textareaMaxCharsState、.textareaMaxCharsState textarea

    background-color: #FF9F9F;

    フォーカスがある Widget の背景色

    		 .textareaFocusState textarea、textarea.textareaFocusState

    background-color: #FFFFCC;

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン

クイックリンク

すべてのプランを表示 プランを管理

リーガルノーティス    |    プライバシーポリシー