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

jquery.peekABar様々なカスタマイズができる便利な通知バー「jquery.peekABar」前のページ

テキストや画像を滑らかにアニメーションさせるニュースティッカー「jQuery liMarquee」次のページjQuery liMarquee

関連記事

  1. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  2. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  3. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  4. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  5. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  6. Glide.js

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP