匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

jqueryで質問をさせてください。

フォームの部分で、未入力の場合は各inputに入れているvalueを表示、クリックしたら空欄になり入力。
クリックを外すと、空欄だったらvalueを表示という普通のフォームです。
以下のように書いているのですが、初期表示だけがどうしてもうまくいきません。
初期表示では各inputに入ってるvalueのあたいを薄いグレーで表示するようにしたいのですが・・・・。
どこか記述ミス等あると思うのですが、アドバイスを頂けると嬉しいです。
よろしくお願いいたします。

var input_value = []

for(i=0; i<$("input").length; i++){
input_value.push($("input").eq(i).attr("value"));
}

$("input").val(input_value[$("input").index(this)]).css({color:"#ccc"}).one("focus",function(){
$(this).val("").css({color:"#000"});
}).blur(function(){
if($(this).val()==""){
$(this).val(input_value[$("input").index(this)]).css({color:"#ccc"}).one("focus",function(){
$(this).val("").css({color:"#000"});
});
}
});

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/11/01 11:45:15
  • 終了:2013/11/08 11:50:04

回答(3件)

匿名回答2号 No.1

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/11/01 17:44:17

スコープにもよるのですが、

.val(input_value[$("input").index(this)])

ここでの this は Window オブジェクトであることが多いです。eachメソッドとか使ってみるのはどうですか?

匿名質問者

ありがとうございます。eachはひらめきませんでした。さっそく試してみようと思います。

2013/11/01 17:59:13
匿名回答3号 No.2

匿名回答3号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/11/02 06:43:09

こういうのをよくあるプレースホルダーって言うんですけど・・・

http://terkel.jp/archives/2010/07/html5-placeholder-fix-with-jquery/

匿名回答3号 No.3

匿名回答3号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/11/02 13:00:26

質問文に載っているコードを,どういうふうに改良したら良いのか
詳しい解説付きで,サンプルコードを書いておきましたよ。

jQueryで,自作のシンプルな「プレースホルダ」を作ってみる
http://d.hatena.ne.jp/TipsMemo+computer-technology/20131102/p1

質問文中のコードの問題点:
・thisのスコープが間違っている。
・eachを使っていない。
・bindとblurの定義箇所がなぜか分離されている。
・ユーザが自分の値を入力し終えてから再度フォーカスを当てた場合にも値がクリアされてしまう。
・one()なので一度しかイベントが発生しない。

匿名質問者

ご丁寧にありがとうございます。
コード拝見させていただきました。考え方、とっても勉強になります。
もっと、jQueryの利点を活用できるよう勉強させていただきます。

ありがとうございました。

2013/11/02 21:19:31
  • 匿名回答1号
    匿名回答1号 2013/11/01 12:13:46
    マニュアル読もうぜ。
    http://api.jquery.com/val/#val2

    ミスとかじゃなくて自分が分かってないということを認めないと、そこから先に進んでいくのは大変だと思うよ。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません