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. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  2. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  3. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  4. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  5. jQuery Flip-Quote
  6. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP