動くプレースホルダー

2023年2月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「ユーザーの入力に応じて動くプレースホルダー」をパクっ作ってみました。

本当は推奨はされない？

参考：Accessible＆Usable｜ユーザーの入力に適応して動くプレースホルダー

前回の繰り返しになりますが、プレースホルダーはあくまで「記入例」であり、ラベルは独立して常に見える状態にしておくのがベストです。

でもプレースホルダーがにゅっと上に移動してそのままラベルの代わりになったら...

少なくとも「今何を入力してたんだっけ？」問題は解消されそうですね。

いざ実装

ということで実装してみましょう。

今回はplaceholder属性は使いません。

参考：CodePen｜Javascript-ful Float Label Pattern

<input>タグを設置します。

<input>

今回は名前入力欄で作ってみます。IDをnameとしておきます。

<input type="text" id="name">

<label>タグを設置します。for属性にnameを指定します。

<input type="text" id="name">
			  
<label for="name">

<fieldset>タグで囲みます。

<fieldset>
			  
  <input type="text" id="name">
			  
  <label for="name">

</fieldset>

<fieldset>タグとは、項目をグループ化して、 Tab キーで移動できるようにするためのタグだそうです。

以下のCSSを記述します。

fieldset {
  border: none;
  position: relative;
}

input + label {
  display: block;
  cursor: text;
  color: #777;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.8em;
  left: 2.3em;
}

input:focus + label,
label.stay {
  top: 1em;
  left: 3em;
  font-size: .7em;
  font-weight: bold;
  color: #32bdeb;
  transition: .15s ease-out all;
}

最後の部分は、inputにフォーカスが当たっているか、labelにstayというクラスが付与された状態だとこうなるよっていう指定だと思います。

以下のスクリプトを記述します。

$('input').on('blur', function() {
  if (!$(this).val() == "") {
    $(this).next().addClass('stay');
  } else {
    $(this).next().removeClass('stay');
  }
});

blurというのは「フォーカスが外れた時の処理」だそうです。

フォーカスが外れた時にinputに何か入力されていたらstayを付与、何も入力されていなければstayを外す、という意味だと思います（たぶん）

この前やった伸縮するテキストエリアにも同様の方法でプレースホルダーを実装できます。

<fieldset>
			  
  <div class="FlexTextarea">
    <div class="FlexTextarea__dummy" aria-hidden="true"></div>
    <textarea id="FlexTextarea" class="FlexTextarea__textarea"></textarea>
	<label for="FlexTextarea">自由入力欄</label>
  </div>

</fieldset>

まとめ

「ラベルに変化するプレースホルダー」ではなく「プレースホルダーに見せかけたラベル」だった！

もうちょっとpaddingを工夫して配置をいい感じにしたいです。