◀ 13.

ボタンを押してパスワードを一時的に表示させる方法(表示/非表示切り替え)【Javascript/jQuery】

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

やりたいこと

通常、パスワード入力欄は「●●●●●」と表示されるが、上記のように目のアイコンを押すことでパスワードを可視化したい。

 

実装

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">

<input id="password" type="password">
<span class="field-icon">
    <i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
</span>

<script>
$(".toggle-password").click(function () {
    $(this).toggleClass("mdi-eye mdi-eye-off");

    var input = $(this).parent().prev("input");
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});</script>
 

※CSSは別途必要

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. 導入方法
  2. 文法
  3. HTML/CSS操作・制御
  4. 要素の取得
  5. 値の取得
  6. 値と要素の追加
  7. 値と要素の削除
  8. 子要素の削除
  9. 要素のコピー
  10. Ajax
  11. 項目をタッチ/クリックしてスライドさせる方法
  12. テキスト/セレクトボックス/ラジオボタン変更時のイベント
  13. パスワードを一時的に表示させる方法
  14. $(document).ready(function() { ...
  15. セレクトボックスにオプションを追加する方法

人気ページ

最近更新/作成されたページ