テキストボックス内のスパン/ラベルテキストを表示して非表示にする

Question

テキストボックスが空の場合、ユーザーがそれぞれのテキストボックスにテキストを入力し始めてぼかしを表示するときに、テキストボックス内のスパン/ラベルを隠す簡単な方法を実装しようとしています。以前

1）ユーザーは、ユーザー名を入力した場合、：

（これは、フォームでユーザーのサインに実装されている） このことは、これまでのところ大丈夫働いて、ここでdemo

である。しかし、それは次のシナリオで失敗しています入力されたユーザー名リスト（自動補完機能がオフになっているときにブラウザによって保存されたフォームデータ）が表示されます。ユーザーがリストからマウスをクリックしてusernameを選択すると、パスワードフィールドには自動的に入力されます。パスワードフィールドには値が入っていますが、スパンを隠すことはありません。 （この場合には助けていないテキストボックスの上にKeyDownイベント/フォーカス/クリック/変化イベント）

2）ユーザー名/パスワードが間違っている、ページをリロード、ユーザー名テキストボックスには、最後の値を入力しました。しかし、まだそれ以上のスパンが表示されています。 （私は、ユーザー名のテキストボックスがpageloadに空であるかどうかをチェックしてみました。それは動作しませんでした）

誰も私がこれらの事を修正するのに役立つことはできますか？あなたは私がplacholderよ必要なもの

事前のおかげで... :)

Answer 1

。プレースホルダはhtml5 で標準化されており、さまざまなjqueryプラグイン（ここではone）で簡単に実装できます。

私はこれらのソリューションを標準として使用することをお勧めします。理想的な解決策はhtml5を使用し、古いブラウザの場合はjavascriptにフォールバックすることです。私はplacholdersを実施し、このフォームATH

ルック：http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

あなたは、入力フィールドに文字を挿入すると、テキストが消えます。それはそのプラグインの助けを借りて行われます。

Answer 2

ここでホイールを再開発しようとしているようです。 how do I make an html text box show a hint when empty

Answer 3

ユーザビリティ面では、私は/ keydownedなど、クリックされた上にかかわらず、これらの両方の入力の透かしを隠すためにひどいだろうとは思わない：これはすでに同じテーマのように見えるものに質問に答えチェックさて、この次のオプションは議論があるので、あなたは警告されている...

<input name="first_name" type="text" autocomplete="off"> 

はちょうどあなたがそれを知っていたことを確認したかった - ほとんどの場合、オートコンプリートからクレジットカードのフィールドを防止するために使用されます。ここで何かが役立つことを願っています。