ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは使える場面が多そうですよ!

最近Webフォームでplaceholderを使って入力すべき項目を明示するケースが増えていますが、入力をはじめるとplaceholderがなくなるので入力すべき項目が分からなくなるという弱点があります。そこで開発者が取り組んでいるのが入力を開始するとplaceholderが移動するフォームライブラリです。

幾つかの実装例がありましたが、その完成形とも言えるのがfloatlabels.jsです。カスタマイズ性も高く、ユーザビリティにも優れたソフトウェアになっています。

とりあえず試す

何はともあれまずはその見た目をチェックしましょう。

入力前。placeholderが出ています。
入力前。placeholderが出ています。

入力を開始するとplaceholderの代わりにテキストフィールドの上部に文字が出てきます。
入力を開始するとplaceholderの代わりにテキストフィールドの上部に文字が出てきます。

アニメーションしながら表示されるので違和感はなさそうです。

日本語でも大丈夫です。
日本語でも大丈夫です。

使い方

jQueryプラグインなので使い方は難しくありません。まずはHTMLを次のように作成します。

<head>
  :
<script src="jquery.js" type="text/javascript"></script>
<script src="floatlabels.js" type="text/javascript"></script>
  :
</head>
<body>
    <div>
        <input type="text" id="test-input" placeholder="This is the placeholder" class="floatlabel"/>
    </div>
</body>

後はfloatlabels.jsを実行するだけです。

$('input.floatlabel').floatlabel();

placeholderと表示される文字を変えたり、実行を遅延したりとカスタマイズもできるようになっています。

その他のスクリーンショット

一番ベーシックな方法では…
一番ベーシックな方法では…

ほんのちょっとテキストボックスが大きくなります。
ほんのちょっとテキストボックスが大きくなります。

つまりキャレットがほんの少し下がるので違和感を感じるかも知れません。それを解決するのは次です。

こちらはテキストボックス自体が少し広めです。
こちらはテキストボックス自体が少し広めです。

placeholderが移動しても違和感はありません。
placeholderが移動しても違和感はありません。

こちらは入力するとplaceholderの文字とは異なるラベルを表示します。
こちらは入力するとplaceholderの文字とは異なるラベルを表示します。

このように違う文字が出ています。
このように違う文字が出ています。

クラス自体を変えて装飾を施すことも可能です。
クラス自体を変えて装飾を施すことも可能です。

使い方は簡単なので、placeholderを使って項目のラベルをなくしている場合はぜひ使ってみてください。ユーザビリティが高まるはずです。

floatlabels.jsはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

floatlabels.js by Clubdesign

clubdesign/floatlabels.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2