Js は、入力ボックスをクリックするとデフォルトのテキストが消える効果を作成します_テキストの特殊効果

ユーザー エクスペリエンスと使いやすさを向上させるために、デザイナーによっては、入力ボックスなどユーザーが Web ページ上で頻繁に使用するものを最適化することがあります。一般的な入力ボックスはどのように最適化されますか?ユーザーエクスペリエンスの観点からは、マウスを入力ボックスの上に置いたときに入力ボックスの色を変更したり、入力ボックス内のデフォルトのテキストを自動的に選択したりするなど、ユーザーの手順を簡素化し、ユーザーの利便性を向上させることができます。 、またはクリックしてボックスを開いたときにデフォルトのコンテンツを自動的にクリアするなどを入力します。 この効果は複雑に思えますが、実際には非常に簡単で、ほんの短い JavaScript コードを使用するだけで解決できます。以下にいくつかのエフェクトのコードを紹介します:

1. 入力ボックスをクリックしてコンテンツの HTML コードを選択します:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

2. マウスが入力ボックス上にあるときの境界線の色または背景色を変更します

この効果には 2 つの方法があります。方法 1 は CSS: focus の擬似要素を使用する方法です。方法 2 は引き続き JavaScript の一部を使用します。方法 1 の HTML コードは上記の例と同じです。次の段落が CSS に追加されます:
input:hover { border:1px ソリッド #F00 }
マウスを入力ボックスの上に置くと、入力ボックスの境界線が赤くなります。ただし、この方法は Firefox ブラウザーでのみ有効であり、IE7 以降ではサポートされていないため、いくつかの制限があります。 方法 2 のコードは、マウス ホバー コードのセクションが最後に追加されている点を除いて、上記の例とほぼ同じです:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> 
</form>

このコードを使用すると、ほとんどのブラウザでサポートできます。
3. 入力ボックスをクリックすると、デフォルトのテキストが表示されなくなります
入力ボックス上でマウスをクリックすると、元のデフォルトのテキストが消えるという効果もあります。他の新しいコンテンツを入力してからマウスを移動すると、入力ボックスの新しいコンテンツは変更されません。新しいコンテンツを入力しなかった場合、マウスは入力ボックスから離れ、デフォルトのテキストが復元されます。 この効果は、JavaScript の短いセクション

<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/> 
</form>

私たちはあなたの質問を慎重に採用します。提案; 私たちはあなたの批判に注意深く耳を傾けます。あなたの提案や遭遇した問題について詳しく説明してください。

上記の 3 つのエフェクトは、比較的単純な JavaScript アプリケーションです。