BlazorでのWebアプリケーション開発手法１【C#】D04_placeholder

今回は「プレースホルダー」について解説します。プレースホルダーとは、入力項目が空のときに「エリアを入力してください」「名前を入力してください」「電話番号を入力してください」のように、その項目に何を入力すればよいのかが分かるよう薄い文字で表示されるガイドのことです。Webページの入力欄でよく見かける表示で、本項ではその出し方を確認します。

図1　入力欄に薄い文字で「placeholder」の説明が重ねて表示されている画面。空の入力項目に何を入れればよいか示すガイド表示がプレースホルダーであることを示している

placeholderを設定する

プレースホルダーの設定は、対象のinputタグに置きます。今回はHome.razorのinputタグにある@bind:event=”oninput”の次の行に追加します。設定する行はどこでもかまいません。

図2　設定前のinputタグ。@bind=”_areaName”、@bind:event=”oninput”、class=”form-control”が並んでいる状態

@bind:event=”oninput”の行末で改行し、IntelliSenseの候補一覧を表示すると、onwaitingやpatternなどと並んでplaceholderという属性が候補に出てきます。

図3　IntelliSenseの候補一覧。onbeforeinput・ontimeupdate・onvolumechange・onwaiting・pattern・placeholder・prefix・propertyなどが並んで表示されている

placeholder=””まで入力し、ダブルクォートの中に表示したい案内文を入力します。今回は「エリアを入力してください」という文言を入れます。

図4　placeholder=”の入力を始めた状態のinputタグ

日本語入力の変換を確定させると、次のようにinputタグへplaceholder属性が追加されます。

<input type="text"
    @bind="_areaName"
    @bind:event="oninput"
    placeholder="エリアを入力してください"
    class="form-control"/>

図5　placeholder=”エリアを入力してください”まで入力が完了したinputタグ

実行して確認する

この状態で実行します。_areaNameの初期値には「高松」が入っているため、まずは入力欄に「高松」が表示されます。この文字を削除してみます。

図6　実行結果。入力欄に初期値「高松」が表示され、その文字が選択されている状態

「高松」を削除すると、薄い文字で「エリアを入力してください」というプレースホルダーが表示されます。

図7　入力欄が空になり、薄い文字で「エリアを入力してください」と表示されている状態

試しに何か文字を入力すると、プレースホルダーは消えます。「aaa」と入力すると、下のパラメータ表示も「パラメータを aaa で送信します」に変わります。もう一度入力欄を空にすると、再びプレースホルダーが表示されます。プレースホルダーは、入力欄が空文字（またはnull）のときにだけ表示される、という仕組みです。

図8　入力欄に「aaa」と入力し、プレースホルダーが消えて実際の入力値が表示されている状態

初期値を空文字にする

ここまでは初期値が「高松」だったため、毎回文字を消してから確認していました。@codeブロックの_areaNameフィールドの初期値を空文字（””）に書き換えておきます。

@code {
    private string _areaName = "";
    private float _value = 12.8f;
    private DateTime _datetime = DateTime.Now;
    private int _counter = 0;
    private void ShowMeasure()

図9　_areaNameフィールドの初期値を空文字””に書き換えている@codeブロック

この状態で実行すると、最初から「エリアを入力してください」というプレースホルダーが表示されます。空文字だけでなく、nullを入れた場合も同様にプレースホルダーが表示されます。

図10　初期値を空文字にして実行した結果。最初からプレースホルダーが表示されている状態

@code {
    private string _areaName = null;
    private float _value = 12.8f;
    private DateTime _datetime = DateTime.Now;
    private int _counter = 0;
    private void ShowMeasure()

図11　_areaNameフィールドの初期値をnullに書き換えている@codeブロック

int型など既定値のある型の場合

たとえばデータバインドする項目をint型にしていた場合はどうなるでしょうか。int型は何もしなくても既定値として0が入ってしまうため、入力欄には「0」が表示されてしまい、空文字やnullのときのようにプレースホルダーへ切り替わりません。

@code {
    private int _areaName;
    private float _value = 12.8f;
    private DateTime _datetime = DateTime.Now;
    private int _counter = 0;
    private void ShowMeasure()

図12　_areaNameフィールドの型をintに変更した@codeブロック

実行すると、入力欄には既定値の「0」が表示されたままになり、プレースホルダーは出てきません。「パラメータを 0 で送信します」と表示され、消えないことが確認できます。

図13　int型のまま実行した結果。入力欄に既定値の0が表示され、プレースホルダーに切り替わらない状態

こういった場合は、null許容型（int?）にしてnullを入れておくとよいです。

@code {
    private int? _areaName = null;
    private float _value = 12.8f;
    private DateTime _datetime = DateTime.Now;
    private int _counter = 0;
    private void ShowMeasure()

図14　_areaNameフィールドをint?型にしてnullを代入している@codeブロック

この状態で実行すると、int型であってもnullが入っていればプレースホルダーが正しく表示されるようになります。

図15　int?型にして実行した結果。プレースホルダー「エリアを入力してください」が正しく表示されている状態

まとめ

ただ、今回のようなテキスト入力は基本的にstring型で受けるのが自然なので、型はstringのままにしておくのがよいでしょう。最終的には次のようなinputタグになります。プレースホルダーは、このような感じで使ってみてください。

<input type="text"
    @bind="_areaName"
    @bind:event="oninput"
    placeholder="エリアを入力してください"
    class="form-control"/>
<p>パラメータを @_areaName で送信します</p>

図16　_areaNameフィールドの型をstring?に戻している@codeブロック