Bootstrap Show Password

JavaScript

パスワードの表示・非表示を切り替えれる「Bootstrap Show Password」

Bootstrap Show Passwordは、Bootstrapによるパスワードの表示・非表示を切り替えることができるプラグインです。パスワードをテキストボックスに入力する際に、入力したパスワードを簡単に表示させたり非表示にさせたりすることができます。

Bootstrap Show Password

デモ

デモではページ読み込み時にテキストボックスに入力されたパスワードが非表示の状態になっています。「Show password」という項目にチェックを入れると、非表示になっているパスワードが表示されます。

また、テキストボックスの隣に設置されている目のアイコンをクリックすることでも、パスワードの表示・非表示を切り替えることが可能です。どちらも、手軽に切り替えれるのでとても便利ですね。

使い方もシンプルでわかりやすいほか、オプションもいくつか用意されています。placement、message、white、eyeClass、eyeOpenClass、eyeCloseClass、eyeClassPositionInsideといった項目の設定が可能です。

ちなみに、オプションはdata属性かJavaScriptを用いて渡すことができます。データ属性の場合は「data-○○」といった形でオプションや値を指定していきます。

ほかにも、イベントのセッティングなどもできるので、気になる人はぜひチェックしてみてください。

Bootstrap Show Password

Canvi左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」前のページ

セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」次のページSection Scroller

関連記事

  1. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  2. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  3. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  4. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  5. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  6. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP