文字色変更のJsが適応されません。

質問

現在、入力エリアの文字色が灰色に統一されており、
入力時（フォーカスがくれば）があれば、文字色を黒色に変更しております。
文字色を制御しているコードは下記です。
▼文字色制御ーーーーーーーーーーー
$(function() {
$(":input").focus(function () {
var id=$(this).attr("id");
$('#'+id).css("color","#000000");
$('#'+id).blur(function(){
if($('#'+id).val() == ""){
$('#'+id).css("color","silver");
}
});
});
});
▲文字色制御ーーーーーーーーーーーーーーーーーーー

既存で記載されている部分に関しましては、問題なく、文字色が変更されるのですが、
JSで入力エリアが追加できるような作りになっているため、
追加された入力エリアでの文字色が変更されません。
id名の取得もできておりませんでした。
どのように記述するとjsで追加したエリアへの文字色変更が
実装できますでしょうか。
▼入力エリア追加ーーーーーーーーーーー
$(function(){
$(".addInspector").click(function(){
var num = parseInt($("#dlTableNum").val(),10) + 1;
var html = $("#addArea").html();
$(".addInspectorBox").append(html.replace(/0_/g, num));
form();
$(".minusInspector").click(function(){
$(this).parents(".dlTable").prev().remove();
$(this).parents(".dlTable").remove();
});
$("#dlTableNum").val(num);
});
});
▲入力エリア追加ーーーーーーーーーーーーーーーーーーー
よろしくお願い致します。

回答No.4

fujillin

ANo3です

＞「:」とはどんな意味があるのでしょうか
セレクタの記述方法は基本的にCSSの記法に準ずるようになっています。
「:」は要素を修飾するセレクタの記法で、a:linkや a:hoverと同様です。

ただし、ご使用の「:input」はCSSにはありません。
jQueryによる拡張で、form内の子要素全体を表すものとされています。
（Selects all input, textarea, select and button elements.）

ANo3で紹介したサイトはjQueryのドキュメンテーションサイトですので、大概のことはそこで調べることができます。（というか、そこに無い情報は他にも無いといって良いでしょう）
　http://api.jquery.com/category/selectors/
　http://api.jquery.com/input-selector/

回答No.3

fujillin

横からですが…

ご提示の設定方法
　$(":input").focus(function () {～～
ですと、設定時に存在する要素にイベントが設定されますが、動的に（後から）追加された要素には設定されません。

ANo2様の回答のように、追加するごとに設定を追加してあげるか（追加した要素にだけ設定する。そうでないと以前の要素にダブって設定されます。）、またはdocument（またはbodyなど）の要素を監視して、セレクタで指定された要素の時にイベントハンドラを実行するようにすればよいでしょう。

後者のような設定方法のためにon()メソッドが用意されています。
　http://api.jquery.com/on/

具体的には
　$(body).on("focus",":input",function(){～～});
のような感じで設定すればよろしいかと。

お礼

ありがとうございます。
ちなみに,":input"という記述の
「:」とはどんな意味があるのでしょうか。
ご存知でしたら、ご教授をお願い致します。

回答No.2

balloon23

検証環境無いので当てずっぽうですが。
追加されたものは最初に読み込まれるinputに含まれないので変更されていない、とします。
なので、増やす毎に再度inputの文字色変更を読み込ませてみてはいかがでしょう？

function input_textcolor() {
$(":input").focus(function () {
var id=$(this).attr("id");
$('#'+id).css("color","#000000");
$('#'+id).blur(function(){
if($('#'+id).val() == ""){
$('#'+id).css("color","silver");
}
});
});
}

として、最初と入力エリアの追加の最後に
input_textcolor();を実行させるとどうでしょう？

回答No.1

ORUKA1951

js使う必要はない。javascriptはあくまで補助として使用しないとjavascriptを無効のブラウザだと使えない。
単純にスタイルシートで
form input,form textarea{color:silver;}
form input:focus,form textarea:focus{color:black;background-color:yellow;}
の二行ですむ。
<form action="">
<p><input type="text" size="30" name="abc" value="入力してください"></p>
<p><textarea cols="30" roes="50" name="abc"></textarea></p>
</form>

お礼

回答をいただき、ありがとうございます。
回答をいただいたものを反映したところ、
入力時は反映され、黒字になるのですが、
入力後に灰色へ戻ってしまいます。