3

さて、私は最初のランディング ページを作成していますが、あまり専門的ではないものです。簡単な Web ページを自分で作成できるようになるコツをつかみたいと思っています。

だから私の問題は、テキストボックスをクリックするたびにテキストが消えることです。それはすべきです。しかし、ユーザーがテキストを入力し、テキスト ボックスをクリックして離し、再度クリックすると、そのテキストは消えます。

新しく入力したテキストが消えないようにするにはどうすればよいですか?

テキストフィールドの現在のコード:

http://pastie.org/8366114

<input type="text" value="Enter Your First Name" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" 
  onclick="javascript:if(this.value=='Enter Your First Name')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your Email';" 
  onclick="javascript:if(this.value=='Enter Your Email')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';" 
  onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>

ここに投稿しなかったことをお詫びしますが、コードブロックのやり方がわかりません..

4

5 に答える 5

5

これをJavaScriptで行うには、必要なのは

<input type="text" value="Enter Your First Name" 
onblur="if(this.value=='')this.value='Enter Your First Name';" 
onfocus="if(this.value=='Enter Your First Name')this.value='';" />

デモ

ただし、html5リファレンスを使用するだけです。placeholder

また

  1. 同じidものを複数回使用しないでください。代わりに を使用してclassください。
  2. 入力は自己終了です (のように<br>)
  3. </br>間違った使い方<br>や<br />

submitここにあなたのコードの作業バージョンがありますvalue。button

<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">

デモ

于 2013-09-30T05:50:56.873 に答える
4 
<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />

または、HTML5 を使用している場合は、プレースホルダー属性を使用できます。

<input type="text" placeholder="Enter Your First Name" id="form"  />
于 2013-09-30T05:50:46.433 に答える
0

onfocus イベントを onclick イベントと同じにする必要があります。

onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"
于 2013-09-30T05:55:16.333 に答える
0 
onFocus="this.value=''"

これにより、テキスト フィールドが無条件に空白にリセットされます。

おそらくここでは onclick または onfocus だけが必要です。onfocus はフィールドへのタブ移動とマウスでのクリックを考慮に入れるため、コードを onclick から onfocus に移動し、onclick を完全に削除することをお勧めします。

于 2013-09-30T05:55:50.360 に答える