入力補助（プレースホルダー） [HTML5] [plug-in] [jQuery] [js]

html

<input type="text" placeholder="テキスト">

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

これといって特別なことはする必要はありません。inputタグやtextareaタグにplaceholder属性を追加して、適切なテキストを入れてください。
テキストカラーはブラウザ（もしくはOS）側でなんとなくそれっぽい色にしてくれるみたいですが、これもOS・ブラウザ（それらのバージョン）の組み合わせによって異なるようです。

css

擬似セレクタを使って装飾できます。
OS・ブラウザ（それらのバージョン）の組み合わせによってはcssが効いたり効かなかったりするようです。

:placeholder-shown { color: #999; } /* ベンダープレフィックスなし */

::-webkit-input-placeholder { color: #999; } /* コロン（：）2つ必要 */

:-moz-placeholder {color: #999; opacity: 1; } /* Firefox 18- */

::-moz-placeholder { color: #999; opacity: 1; } /* Firefox 19+ コロン（：）2つ必要 */

:-ms-input-placeholder { color: #999; } /* IE 10+ */

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

いずれ、placeholder-shownに統一されると思うのですが、ご覧のとおり2016/09現在、記述がバラバラです。注意してください。

html

<input type="text" style="color:#999;" onblur="sText(this)" onfocus="cText(this)" value="テキスト">

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 通常通りに、input（type:text）を設置
2. このサンプルの場合、フォーカスイベントごとに文字色を変えているので、初期値としてstyle属性で文字色（フォーカスが外れているときの色）を指定しておく
3. onblur（フォーカスが外れたとき）の処理、onfocus（フォーカスされたとき）の処理をそれぞれ記述（ここでは関数を呼び出している）。
   関数に渡す引数thisはinputタグ自身

inputタグに直にスタイルを設定している以外は、とくにcssの設定は必要ないです。

js

function cText(obj){
    if(obj.value==obj.defaultValue){
        obj.value="";
        obj.style.color="#5a5a5a";
    }
}

function sText(obj){
    if(obj.value==""){
        obj.value=obj.defaultValue; //FF対策
        obj.style.color="#999";
    }
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 1〜6行目：フォーカスされたときの関数cText(obj)では引数obj（ここでは関数を呼び出すinputタグ）の初期値（valueにあらかじめ設定していた値）をクリアして、テキストカラーを変更する。
2. 8〜13行目：フォーカスが外れたときの関数sText(obj)では引数obj（ここでは関数を呼び出すinputタグ）のvalue値が空の場合、初期値に戻し、テキストカラーを変更する。

• 関数名は任意です。
• 10行目はFF以外はなくても問題ないようです。通常、テキストボックスに一度フォーカスした後、何も入力せずにフォーカスを外れると、他のブラウザではテキストボックス（引数objのvalue値）の初期値（サンプルでは「ここに入力」）が再度表示されるのですが、FFでは表示されないため、この1行を付加しています。

html

<input type="text" style="background-image: url(画像ファイルのパス);" onblur="ShowFormGuideImage1(this);" onfocus="HideFormGuideImage(this);" value="">

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 通常通りに、input（type:textまたはpassword）を設置
2. このサンプルの場合、フォーカスイベントごとに背景画像を表示させたり消したりするので、最初に表示させておくためにstyle属性で直接背景の画像パスを記述しておく
3. onblur（フォーカスが外れたとき）の処理、onfocus（フォーカスされたとき）の処理をそれぞれ記述（ここでは関数を呼び出している）。
   関数に渡す引数thisはinputタグ自身

css

input{
    background-repeat: no-repeat;
    background-position:0 2px; /*必要であれば、画像の位置も調整*/
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

cssは背景画像の繰り返しについてなど必要な設定しておきます。

js

function ShowFormGuideImage1(obj) {
   // 画像を表示
   if( obj.value == '' ) {
     obj.style.backgroundImage='url(画像ファイルのパス)';
   }
}
function HideFormGuideImage(obj) {
   // 画像を消す
   obj.style.backgroundImage = '';
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. フォーカスされたときの関数ShowFormGuideImage1(obj)では引数obj（ここでは関数を呼び出すinputタグ）に画像を表示させる
2. フォーカスが外れたときの関数HideFormGuideImage(obj)では引数obj（ここでは関数を呼び出すinputタグ）から画像を消す

関数名は任意です。

html

<input type="text" placeholder="テキスト" class="ph">

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 任意の入力フォーム（type="text"のinputタグやtextarea）を設置
2. placeholder属性を設定
3. プラグインを適用する入力フォームを指定できるような任意のclass名や目的によってはid名を設定

• placeholder属性はHTML5で使用できる属性なので、html4やXHTMLではバリデートチェックをかけるとエラーになります。
  この場合は気にしなくてもいいですが、気になる場合はplaceholder属性の代わりにtitle属性も使用できます。
• cssは特に設定の必要ないです。適宜デザインに合わせて設定してください。

js

$(function(){
    $('.ph').ahPlaceholder({
        placeholderColor : '#999',
        placeholderAttr : 'placeholder',
        likeApple : true
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. プラグインを適用したいinput（textarea）タグをセレクターで指定（ここでは任意のclass名を使用）
2. 3行目：入力補助の文字色を設定
3. 4行目：html側でplaceholder属性を使用した場合はこの行が必要だが、title属性を使用した場合は不要
4. 5行目：プレースホルダのテキストをどのタイミングで消すかを設定（デフォルトではフォームにフォーカスがあたったタイミングでテキストが消えるが、trueではテキストを入力しはじめたタイミングで消える）。

このプラグインは、placeholder属性が有効なブラウザでは実行されないようになっているので、html側でplaceholder属性を使用した場合、placeholderColorオプションやlikeAppleオプションはplaceholder属性が有効なブラウザでは無効です（placeholder属性が有効なブラウザでテキストカラーを変えたいときはcssで対処してください）。
title属性を使用すれば、このプラグインが動くブラウザすべてにこれらのオプションが適用されます。