JavaScript

フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLabels.js」

フォームを入力する際にあると便利なのがplaceholderです。しかし、いざ入力しようとすると何の項目だったか忘れてしまうことがありませんか?そんな時に役立つのがFlowupLabels.jsというjQueryプラグイン。これを使えばplaceholderの利便性を高めることができるので、ユーザーにも優しいフォームを作成することができます。

[ads_center]

FlowupLabels.js

FlowupLabels.jsの実際のデモは以下になります。

FlowupLabels.js

デモ

各項目にカーソルを合わせるとplaceholderが上へ移動するのが特徴です。移動と同時にplaceholder自身のフォントサイズが小さくなるので、入力の妨げにもならないのがいいですね。

入力中は常にplaceholderが表示されているので「今何の項目を入力してるんだっけ?」という状況に陥ることはありません。

一見地味な機能かもしれませんが、ユーザーにとってはかなり利便性が上がるんじゃないかなーと思います。

FlowupLabels.js

関連記事

  1. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  2. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  3. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  4. Clock Timepicker Plugin for jQuery
  5. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

最近の記事

  1. マーガレットハウエルとミズノのコラボシューズ
  2. フレンチトーストや自家製ソーセージ
  3. ハレイワ スムージー
  4. クローバーで淹れたコーヒー
  5. 雪が降る日本海

アーカイブ

PAGE TOP