IT技術総合Wiki

ボタンを押してパスワードを一時的に表示させる方法(表示/非表示切り替え)【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>