floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！ MOONGIFT

テクノロジーカテゴリーの変更を依頼記事元:

www.moongift.jp

12 usersがブックマークコメント

記事へのコメント3件

注目コメント
新着コメント

taitokiss “placeholder”

2014/01/18 リンク

tomoyukim via MOONGIFT http://www.moongift.jp/

2014/01/17 リンク

minonet floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！これは使える場面が多そうですよ！最近Webフォームでplaceholderを使って入力すべき項目を明示するケースが増えていま...

2014/01/17 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.moongift.jp%2F2014%2F01%2Ffloatlabels-js-placeholder%25E3%2581%258C%25E3%2583%25A9%25E3%2583%2599%25E3%2583%25AB%25E3%2581%25B8%25E7%25A7%25BB%25E5%258B%2595%25E3%2581%2599%25E3%2582%258B%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AA%25E3%2581%25AE%25E6%25B1%25BA%25E5%25AE%259A%25E7%2589%2588%25EF%25BC%2581%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://www.moongift.jp/2014/01/floatlabels-js-placeholder%E3%81%8C%E3%83%A9%E3%83%99%E3%83%AB%E3%81%B8%E7%A7%BB%E5%8B%95%E3%81%99%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E6%B1%BA%E5%AE%9A%E7%89%88%EF%BC%81/">floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！ MOONGIFT</a><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2014/01/floatlabels-js-placeholder%E3%81%8C%E3%83%A9%E3%83%99%E3%83%AB%E3%81%B8%E7%A7%BB%E5%8B%95%E3%81%99%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E6%B1%BA%E5%AE%9A%E7%89%88%EF%BC%81/">はてなブックマーク - floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！ MOONGIFT</a></div></iframe>

プレビュー

規約違反を報告

floatlabels.js - placeholderがラベルへ移動するライブラリの決定版！ MOONGIFT

これは使える場面が多そうですよ！最近Webフォームでplaceholderを使って入力すべき項目を明示するケー... これは使える場面が多そうですよ！最近Webフォームでplaceholderを使って入力すべき項目を明示するケースが増えていますが、入力をはじめるとplaceholderがなくなるので入力すべき項目が分からなくなるという弱点があります。そこで開発者が取り組んでいるのが入力を開始するとplaceholderが移動するフォームライブラリです。幾つかの実装例がありましたが、その完成形とも言えるのがfloatlabels.jsです。カスタマイズ性も高く、ユーザビリティにも優れたソフトウェアになっています。とりあえず試す何はともあれまずはその見た目をチェックしましょう。入力前。placeholderが出ています。入力を開始するとplaceholderの代わりにテキストフィールドの上部に文字が出てきます。アニメーションしながら表示されるので違和感はなさそうです。日本語でも大丈夫です。使