今回は、HTMLの入力ボックスを最適化してユーザーエクスペリエンスと使いやすさを向上させる方法についてお届けします。次に実際のケースを見てみましょう。ユーザー エクスペリエンスと使いやすさを向上させるために、デザイナーによっては、入力ボックスなど、Web ページでユーザーが頻繁に使用するものを最適化することがあります。一般的な入力ボックスはどのように最適化されますか?ユーザーエクスペリエンスの観点からは、マウスを入力ボックスの上に置いたときに入力ボックスの色を変更したり、入力ボックス内のデフォルトのテキストを自動的に選択したりするなど、ユーザーの手順を簡素化し、ユーザーの利便性を向上させることができます。 、またはクリックしてボックスを開いたときにデフォルトのコンテンツを自動的にクリアするなどを入力します。
この効果は複雑に思えますが、実際には非常に簡単で、ほんの短いjavascript
コードだけで解決できます。以下にいくつかのエフェクトのコードを紹介します。1. 入力ボックスをクリックして、コンテンツの HTML コードを選択します。
を使用しても同じ効果を実現できます。 onfocus="this.select()" となります。2. マウスが入力ボックス上にあるときに境界線の色または背景色を変更します
この効果には 2 つの方法があります。方法 1 は、CSS の疑似要素を使用することです。方法 2 は、小さなフォーカスを使用することです。 JavaScript の一部; メソッド 1 は HTML コードは、次のセクションが CSS に追加されることを除いて、上記の例と同じです:
input:hover { border:1px solid #F00; }
3. 入力ボックスをクリックするとデフォルトのテキストが消えます
入力ボックスをクリックすると、元のデフォルトのテキストが消えます。他の新しいコンテンツを入力してからマウスを移動すると、入力ボックスの新しいコンテンツは変更されません。新しいコンテンツを入力しなかった場合、マウスは入力ボックスから離れ、デフォルトのテキストが復元されます。 この効果は、短い JavaScript 判定を追加することで実現できます:
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
HTML で入力ドロップダウン メニューを実装する方法 CSS3 でプログレッシブ エンハンスメントとグレースフル デグラデーションを使用する方法 新しい単位 vw、vh、vmin の使用方法、および css3 の vmax HTML で title 属性を使用して、マウスがホバーしている場所にテキストを表示する方法以上がHTML 入力ボックスを最適化してユーザー エクスペリエンスと使いやすさを向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。