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

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  2. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  3. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  4. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  5. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  6. Filterable Product Grid

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP