7

ページの読み込み時にテキストボックスにテキストを入れる方法を知りたいです。例: ログイン ページがある場合、「ユーザー名」と「パスワード」という名前の 2 つのテキスト ボックスがあります。ページが読み込まれるときに、テキストボックスに「ユーザー名」が書かれた状態で読み込まれるようにしたいので、その外側にラベルを付ける必要はありません。ただし、ユーザーがテキストボックス内をクリックすると、テキストボックスは消えます。どうすればいいですか?

4

6 に答える 6

19
 <input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search"> 

... Stack Overflow検索ボックスから。


onblurチェックするイベントを追加することもできます。if (this.value=='') this.value = 'search'

ユーザーがテキストボックスの外側をクリックし、フィールドが空の場合、これにより透かしが再印刷されます。

于 2009-12-15T23:48:37.160 に答える
7

より現代的な方法は、「PlaceHolder」を使用することです

<input type="text" placeholder="search" />
于 2014-08-01T17:24:01.090 に答える
4

これを行う方法については、多くのチュートリアルがあります。 jQuery JavaScript フレームワークを使用したチュートリアルの 1 つを次に示します。

これについては、通常の JavaScript を使用した別の人気のあるブログ投稿があります。

于 2009-12-15T23:50:12.430 に答える
4

素人の言葉で:

  • 入力に着目すると、値が「Username」の場合は「」に設定します
  • ボックスからフォーカスを外すとき、値が "" (つまり、何も入力されていない) の場合は、値を "Username" にリセットして、まだデータを入力していないユーザーにフィードバックを提供します。

コード:

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" />
于 2009-12-15T23:51:42.083 に答える
0

JS:

   function clearDefault(ctl){
       if(ctl.value==ctl.defaultValue) { ctl.value = ""; }
    }

テキストボックスにonfocus="clearDefault(this)"そのテキストを含めて、「ユーザー名」または「パスワード」に設定します。

于 2009-12-15T23:50:18.013 に答える
0

この記事http://www.alistapart.com/articles/makingcompactformsmoreaccessibleを参照してください。もちろん、jQuery を使用している場合は、「ラベルオーバー」プラグインがあります。

于 2009-12-15T23:50:35.440 に答える