人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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"});
});
}
});

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● 匿名回答2号

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

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

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


匿名質問者さんのコメント
ありがとうございます。eachはひらめきませんでした。さっそく試してみようと思います。

2 ● 匿名回答3号

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

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


3 ● 匿名回答3号

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

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

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


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ