jQuery でフォーカスすると input 要素内のテキストを削除したりスタイルを変更するコード

前回 input 要素を選択するとテキストを削除する JavaScript を紹介しました。今回は jQuery を使ったコードを紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery(function() {
    $("#textbox").focus(function() {
        if($(this).val() == 'テキストを入力') {
            $(this).css("color","#333");
            $(this).val('');
        }
    });
    $("#textbox").blur(function() {
        if($(this).val() == '') {
            $(this).css("color","#aaa");
            $(this).val('テキストを入力');
        }
    });
});

変更点は ID とテキストを入力という部分です。こちらをあなたの環境によって書き換えてください。実際に HTML に変更を加えなくて済むのと、デザイナーでも書きやすい jQuery での実装ですので手を加えるのが楽です。是非お使いください。

関連記事

コメント

コメントは受け付けていません。