floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！
これは使える場面が多そうですよ！ 最近Webフォームでplaceholderを使って入力すべき項目を明示するケースが増えていますが、入力をはじめるとplaceholderがなくなるので入力すべき項目が分からなくなるという弱点があります。そこで開発者が取り組んでいるのが入力を開始するとplaceholderが移動するフォームライブラリです。 幾つかの実装例がありましたが、その完成形とも言えるのがfloatlabels.jsです。カスタマイズ性も高く、ユーザビリティにも優れたソフトウェアになっています。
とりあえず試す
何はともあれまずはその見た目をチェックしましょう。
アニメーションしながら表示されるので違和感はなさそうです。
使い方
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を使って項目のラベルをなくしている場合はぜひ使ってみてください。ユーザビリティが高まるはずです。
floatlabels.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。