ユーザーエクスペリエンスと使いやすさを向上させる HTML 入力ボックスの最適化詳細な紹介-htmlチュートリアル-php.cn

ユーザーエクスペリエンスと使いやすさを向上させる HTML 入力ボックスの最適化詳細な紹介

高洛峰

リリース： 2017-03-06 15:27:45

オリジナル

1545 人が閲覧しました

デザイナーは、入力ボックスなど、Web ページでユーザーが頻繁に使用するものを最適化します。一般的な入力ボックスはどのように最適化されますか?たとえば、マウスを入力ボックスの上に置くと、入力ボックスの色が変更され、入力ボックス内のデフォルトのテキストが自動的に選択されます。ユーザーエクスペリエンスと使いやすさを向上させるために、デザイナーによっては、入力ボックスなどユーザーが 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>

ログイン後にコピー

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

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

この効果には 2 つの方法があります。方法 1 は、CSS の疑似要素を使用することです。方法 2 は、小さなフォーカスを使用することです。 JavaScript の一部; メソッド 1 は HTML コードは、次のセクションが CSS に追加されることを除いて、上記の例と同じです。

コードは次のとおりです。入力ボックスを選択すると、入力ボックスの境界線が赤になりますが、この方法は Firefox ブラウザーおよび IE7 以降で有効な場合にのみ機能しますが、IE6 ではサポートされていないため、特定の制限があります。方法 2 のコードは、マウスホバーコードのセクションが最後に追加されている点を除いて、上記の例とほぼ同じです:

コードは次のとおりです:

input:hover { border:1px solid #F00; }

ログイン後にコピー

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

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

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

コードは次のとおりです:

<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=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" /> 
</form>

ログイン後にコピー

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

コードは次のとおりです:

<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=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" onFocus="if (value ==&#39;Dreamweaver&#39;){value =&#39;&#39;}" onBlur="if (value ==&#39;&#39;){value=&#39;Dreamweaver&#39;}"/> 
</form>

ログイン後にコピー

上記の3つの効果はどれもHTMLコードの範囲を超えた比較的単純なJavaScriptアプリケーションですが、これらを使いこなすことでHTMLアプリケーションやWebページ制作に大きな利便性をもたらしますので、ある程度の使いこなしも必要です。必要に応じて簡単な JavaScript を使用します。

ユーザーエクスペリエンスと使いやすさを向上させるための HTML 入力ボックスの最適化については、PHP 中国語 Web サイトに詳細な関連記事があるのでご注意ください。