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. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  2. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  3. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  4. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  5. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

  6. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP