web-dev-qa-db-ja.com

選択ボックスのフロートラベルパターン

あなたはこのパターンに出くわしたと思いますが、テキスト入力要素だけでなく、選択ボックスなどの他のフォーム要素でこのパターンを使用する方法に関する情報を提供できるドキュメントがあるかどうか誰かが知っていますか？

このパターンの詳細情報： http://bradfrostweb.com/blog/post/float-label-pattern/

enter image description here

formsinteraction-designinput-fieldshelp
16
Kyle McBride

Float Pattern Demo を選択ボックスで機能するように変更しました。

まず最初に、Stateラッパー、ラベル、ボックスをHTMLフォームに追加し、そこにすべての状態をオプションとして追加しました。 Stateというテキストとその値に空の文字列を含むデフォルトのアイテムを含めました。このようにして、実際の状態オプションと比較して、それが選択されているかどうかを簡単に確認できました。

次に、CSSを2つのスタイルに変更しました。 _option { color: black; }_および_.watermark { color: #aaa }_。最初のものはデフォルトで選択オプションを黒にしています。 2番目のものは、選択されているデフォルト項目に基づいて、他の入力要素の透かしのように、オプションの色を灰色に変更するために使用されます。

私がしなければならない最後のことは、jQueryを変更して選択ボックスを接続することでした。したがって、これが最初に機能した方法は、すべてのcheckval要素のkeyup、focus、blurイベントへのフローティングラベルと添付リスナーの可視性を切り替えるinputという関数をバインドすることでした。

selectをフックする方法が必要だったので、セレクターを変更してselectを含め、$("input, select")にしました。次に、select changeイベントに特定のリスナーをアタッチする必要がありました。これは、選択が行われたときに発生するリスナーだからです。次に、現在選択されている項目の値に値があるかどうかに基づいて、前に作成した透かしクラスをオンとオフに切り替えるコードを記述するだけで済みました。その後、checkval関数を呼び出して、選択ボックスのフローティングラベルの表示を切り替えます。

すべてのブラウザでテストしたわけではありませんが、他のフローティングラベルと同じであり、ユーザーエクスペリエンスの一貫性とクリーンさを維持しているようです。

楽しい！

動作中のCopePenデモを参照

HTML

_<div class="field-wrapper">
  <label for="fname">First Name</label>
  <input name="fname" placeholder="First Name" />
</div>

<div class="field-wrapper">
  <label for="lname">Last Name</label>
  <input name="lname" placeholder="Last Name" />
</div>

<div class="field-wrapper">
  <label for="city">City</label>
  <input name="city" placeholder="City" />
</div>

<div class="field-wrapper">
  <label for="state">State</label>
  <select name="State" placeholder="State"> 
    <option value="" selected="selected">State</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option> 
    <option value="CA">California</option> 
    <option value="CO">Colorado</option> 
    <option value="CT">Connecticut</option> 
    <option value="DE">Delaware</option> 
    <option value="DC">District Of Columbia</option> 
    <option value="FL">Florida</option> 
    <option value="GA">Georgia</option> 
    <option value="HI">Hawaii</option> 
    <option value="ID">Idaho</option> 
    <option value="IL">Illinois</option> 
    <option value="IN">Indiana</option> 
    <option value="IA">Iowa</option> 
    <option value="KS">Kansas</option> 
    <option value="KY">Kentucky</option> 
    <option value="LA">Louisiana</option> 
    <option value="ME">Maine</option> 
    <option value="MD">Maryland</option> 
    <option value="MA">Massachusetts</option> 
    <option value="MI">Michigan</option> 
    <option value="MN">Minnesota</option> 
    <option value="MS">Mississippi</option> 
    <option value="MO">Missouri</option> 
    <option value="MT">Montana</option> 
    <option value="NE">Nebraska</option> 
    <option value="NV">Nevada</option> 
    <option value="NH">New Hampshire</option> 
    <option value="NJ">New Jersey</option> 
    <option value="NM">New Mexico</option> 
    <option value="NY">New York</option> 
    <option value="NC">North Carolina</option> 
    <option value="ND">North Dakota</option> 
    <option value="OH">Ohio</option> 
    <option value="OK">Oklahoma</option> 
    <option value="OR">Oregon</option> 
    <option value="PA">Pennsylvania</option> 
    <option value="RI">Rhode Island</option> 
    <option value="SC">South Carolina</option> 
    <option value="SD">South Dakota</option> 
    <option value="TN">Tennessee</option> 
    <option value="TX">Texas</option> 
    <option value="UT">Utah</option> 
    <option value="VT">Vermont</option> 
    <option value="VA">Virginia</option> 
    <option value="WA">Washington</option> 
    <option value="WV">West Virginia</option> 
    <option value="WI">Wisconsin</option> 
    <option value="WY">Wyoming</option>
  </select>
</div>
_


CSS

_.field-wrapper 
{
  position: relative;
  margin-bottom: 20px;
}
label 
{
  position: absolute;
  top: -13px;
  left: 0;
  font-size: 11px;
  color: #aaa;
  transition: all 0.1s linear;
  opacity: 0;
  font-weight:b old;
}
label.on 
{
  color: #4481C4;
}
label.show 
{
  top: -15px;
  opacity: 1;
}
option
{
  color: black;
}
.watermark
{
  color: #aaa;
}
body 
{
  padding: 20px;
    /* the following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail?id=108025 */
  -webkit-backface-visibility: hidden;
}
_


JQUERY

_$(function () 
{
  var onClass = "on";
  var showClass = "show";

  $("input, select")
    .bind("checkval", function () 
    {
      var label = $(this).prev("label");

      if (this.value !== "")
        label.addClass(showClass);

      else
        label.removeClass(showClass);
    })
    .on("keyup", function () 
    {
      $(this).trigger("checkval");
    })
    .on("focus", function () 
    {
      $(this).prev("label").addClass(onClass);
    })
    .on("blur", function () 
    {
        $(this).prev("label").removeClass(onClass);
    })
    .trigger("checkval");

  $("select")
    .on("change", function ()
    {
      var $this = $(this);

      if ($this.val() == "")
        $this.addClass("watermark");

      else
        $this.removeClass("watermark");

      $this.trigger("checkval");
    })
    .change();
});
_
4
Code Maverick

「フローティング」はスタイルの重要な部分ではありません。ここにあるのは、2つのスタイル要素です。

  1. フィールドのタイトルは、フィールドに入力した後にのみ表示されます

  2. 現在のフィールドの青いハイライト

このスタイルが実際にフォームをどの程度改善するかはわかりませんが、複数選択フィールドの場合は同じです-オプションが選択されるまでタイトルが表示されるドロップダウンと、その上に青色でハイライト表示される小さなタイトルドロップダウンが開いているとき。

2
Ofir

アクティブな入力要素の場合、選択ボックスがフォーカスを取得したとき、またはチェックボックスの場合はアクティブになったときなどに、「ハローバースト」を表示できます。

0
taylorhayward