フォーム内に入力例を表示させるには、どの方法がいいの？

やりたかったこと

入力例を表示させたい

入力フォームの中に、デフォルトで入力例が表示されているフォームって、よく見かけますよね。

Qiita の検索欄にも「投稿/ユーザー検索」という文字列がデフォルトで入っています。

ユーザーはこれを見れば、ここにキーワードなりユーザー名を入れて検索すればいいのだな、とすぐ分かりますよね。

ということで、入力例をテキストボックス内に表示させるのは、ユーザビリティーのために必須な施策だと思います。

placeholder は使えないの？

HTML5 に詳しい方は、input 要素の placeholder 属性を指定すればいいじゃん、と思うかもしれない。

こんな感じ。

<input type="search" name="go" placeholder="キーワードを入力してください">

ただし、placeholder には欠点があります。
それは、 IE9以下 では対応していないという点です。
IE環境が必須の場合、別の方法をとらなければいけません。

jQuery プラグインを使う

IE環境でもボックス内に入力例を表示させる方法を、2つ紹介します。
どちらもjQuery プラグインを使います。

clearfield を使う

clearfield を使います。

使用方法は簡単で、上のリンク先の「Download」からcleaField.js か clearField.packed.js のいずれかをダウンロードし、

1 jsファイルを読み込む

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.clearfield.js"></script>

2 script を記述

<script>
$(document).ready(function() {
    $('.clearField').clearField();
});
</script>

3 class 名を指定

<input type="text" class="clearField" value="検索ワードを入れてください">

これでOK。

参考：jQuery 簡単軽量！入力例を表示するプラグイン【clearfield】を使用してフォームを改良する方法

ah-placeholder.js を使う

clearfield は簡単でよいのですが、試してみたら一つ難点がありました。

clearfield の場合、value にサンプルのテキストを入力するので、入力フォームで行ったり来たりするとサンプルのテキストが入力データとして残ってしまいます。

なので、ah-placeholder も試してみました。

ah-placeholder も設定は簡単です。

1 jsファイルを読み込む

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ah-placeholder.js"></script>

2 script を記述

<script>
$(function() {
$('[placeholder]').ahPlaceholder({
    placeholderColor : 'silver',
    placeholderAttr : 'placeholder',
    likeApple : false
    });
});
</script>

3 placeholder を指定

<input type="text" class="" value="" placeholder="検索ワードを入れてください">

参考：HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」

どっちがいいか

今回は、ah-placeholder を採用しました。
placeholder で使えるのがいいですね。

そのうちIE9以下の使用者は絶滅危惧種となるでしょうし（まだ何年も先だが）。

注：IE9以下だとvalueが書き換えられるのかどうかは、まだ確認していないです。