HTML 入力ボックスの最適化によるユーザー エクスペリエンスと使いやすさの向上_HTML/Xhtml_Web ページの制作

ユーザー エクスペリエンスと使いやすさを向上させるために、デザイナーによっては、入力ボックスなどユーザーが Web ページで頻繁に使用するものを最適化することがあります。一般的な入力ボックスはどのように最適化されますか?ユーザーエクスペリエンスの観点からは、マウスを入力ボックスの上に置いたときに入力ボックスの色を変更したり、入力ボックス内のデフォルトのテキストを自動的に選択したりするなど、ユーザーの手順を簡素化し、ユーザーの利便性を向上させることができます。 、またはクリックしてボックスを開いたときにデフォルトのコンテンツを自動的にクリアするなどを入力します。

この効果は複雑に思えますが、実際には、短い JavaScript コードを使用するだけで簡単に解決できます。以下にいくつかのエフェクトのコードを紹介します。

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

このコードの最も重要な部分は、onfocus を使用しない場合、onfocus="this などの onclick を使用して同じ効果を実現できます。 .select()」。

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

この効果には 2 つの方法があります。1 つは CSS の疑似要素を使用する方法です: focus ; メソッド 2 はまだ JavaScript の短い部分を使用しています。メソッド 1 の HTML コードは、次の段落が CSS に追加されている点を除いて、上記の例と同じです:


マウスを入力ボックスの上に置くと、入力ボックスの境界線が赤に変わりますが、この方法は Firefox ブラウザーと IE7 以降でのみ有効であり、IE6 はサポートしていないため、一定の制限があります。 方法 2 のコードは、マウス ホバー コードのセクションが最後に追加されていることを除いて、上記の例とほとんど同じです:

これを使用しますコード、大きい ほとんどのブラウザーがサポートできます。

3. 入力ボックスをクリックすると、デフォルトのテキストが消えます。

マウスで入力ボックスをクリックすると、元のデフォルトのテキストが消えます。他の新しいコンテンツを入力してからマウスを移動すると、入力ボックスの新しいコンテンツは変更されません。新しいコンテンツを入力しなかった場合、マウスは入力ボックスから離れ、デフォルトのテキストが復元されます。 この効果は、判定用の短い JavaScript を追加するだけで実現できます:


input のプレースホルダー属性は HTML5 で直接使用できます: