この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:T
更新日時:2020-02-07 16:57:17

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

やりたいこと

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

 

実装

<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は別途必要