入力フォーカスのプレースホルダスパンのフォント色を変更します。

Question

入力フィールドには、その内部にスパンのプレースホルダがあります。私がしたいのは、入力フィールドがクリックされたときにプレースホルダーの色を変更することです。ここに私のフィールドの例があるjsFiddleがあります。

http://jsfiddle.net/Vbnj2/

それを行うための最善の方法は何ですか？

Answer 1

あなたは、入力要素のセレクターを使用して、前のスパンをつかむことができます。色に影響を与えるクラスを追加します。ぼかしでクラスを削除します。

http://jsfiddle.net/Vbnj2/1/

$("span.holder + input").focus(function() { 
    $(this).prev('span.holder').addClass('active'); 
}).blur(function() { 
    $(this).prev('span.holder').removeClass('active'); 
}); 

最近のブラウザはplaceholder属性のサポートを追加しました。入力属性としてplaceholder="My Text"を追加するだけで、ブラウザは必要に応じて自動的に挿入/削除します。

Answer 2

私は、これはあなたがそれに近づいてきた方法とは異なっているが、知っているあなたが何をしようとしていることは注目にホルダーテキストを削除している場合、あなたは常にそれが何this here

を使用することができますが読み込まれますあなたの入力titleの属性から、あなたのcssのデフォルトのテキストの色を設定してから、フォーカス/ブラーすると、テキストが追加/削除されます。値がないかぎり、ユーザーの値はデフォルトのテキストではなく、

HTML

<input type="text" name="firstname" class="defaultText" title="First Name" /> 

CSS

input { margin: 10px; padding: 5px; } 

.defaultTextActive { color: #000; } 

jQueryの

$(".defaultText").focus(function(srcc) { 

    if ($(this).val() == $(this)[0].title) { 
     $(this).removeClass("defaultTextActive"); 
     $(this).val(""); 
    } 

}); 

$(".defaultText").blur(function() { 

    if ($(this).val() == "") { 
     $(this).addClass("defaultTextActive"); 
     $(this).val($(this)[0].title); 
    } 

}); 

$(".defaultText").blur();