テキストボックス・エリアにプレースホルダーを実装

HTML5のplaceholder属性を使用する

/*  Firefox, Chrome, Safari, Opera */
<!-- テキストボックス -->
<input type="text" placeholder="write something...">
<!-- テキストエリア -->
<textarea placeholder="write something..."></textarea>

IE(8+)でもplaceholder属性を使用

同じようにplaceholderを指定して、以下のスクリプトを追加するとIEでplaceholderを実装できます。デモ

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

$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur().parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

参考：https://gist.github.com/hagenburger/379601

動きのあるプレースホルダーを実装できるjQueryプラグイン「Super Labels」

デモ | ダウンロード

Related

クリックするとテキストボックスにかわるラベルを実装 テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限) テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」 入力テキストの文字数をカウントしてくれる「Textchange」 時刻入力に便利な「Timepicker for Bootstrap」 日付入力に便利な「Datepicker for Bootstrap」 数値入力スライダー「jQuery Simple Slider」 時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)