jQuery Smart Placeholder

JavaScript

ユーザーが入力中でもプレースホルダーを表示してくれる「jQuery Smart Placeholder」

jQuery Smart Placeholderはフォーム内でユーザーが入力中の時でもプレースホルダーを表示してくれる便利なjQueryプラグインです。フォーカス時にプレースホルダーが上または下へ移動してくれるので、入力作業を妨げることもありません。

jQuery Smart Placeholder

デモ

一般的なプレースホルダーってinput要素にフォーカスした時点で消えちゃうので、複雑な項目なんかだと「具体例を参考にしながら入力したい」といった時など不便ですよね。

jQuery Smart Placeholderを使えば、フォーカス時にプレースホルダーが移動してくれるのでとても便利です。移動する位置はオプションのpositionという項目にtopかbottomを指定すればOKです。

このように、カラー、サイズ、スピードなど他にもいろいろなオプションが揃っています。

$("input").smartPlaceholder({
    text: 'Enter Value',
    backgroundColor: '#fff',
    color: '#888',
    size: 12,
    speed: 0.3,
    radius: 3,
    indent: 5,
    position: 'bottom',
    mode: 'extend'
});

jQuery Smart Placeholder

関連記事

  1. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  2. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  3. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  4. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  5. BookBlock Revised
  6. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP