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

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」

デモ | ダウンロード

  • このエントリーをはてなブックマークに追加

関連記事

no image

Javascriptでユーザエージェントを取得

Javascriptでユーザエージェントをwindow.navigator.userAgentで取得できます。あとは、正規表現を使用してブラウザの振り分けなどが行えます。 alert( wind

no image

テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)

スクロールバーを表示させない テキストエリアでは、枠を超える文字数を入力すると縦スクロールバーが表示されますが。それを無効化します。(css) デモ /* Firefox, Chrome,

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑