密码显示隐藏

.password {
        position: relative;
    }

    .password, .n-txtCss {
        display: flex;
        align-items: center;
    }

    .password .fa {
        position: absolute;
        right: 10px;
        cursor: pointer;
    }

    .fa-eye-slashs {
        width: 20px;
        height: 20px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T93SUQ3CUAyF4W8OwAEScIAVUAA4wAFIGA6QgAQk4AAcQM6yJXcQwpK9rUmTm+b077lNKyOjGtlvQoA1VtgM3EmNK+pyByk+sP8DOWGGDO0tcdFSnzji/AFKwxZzRNtE6eCAe2cNS7wK3QXRJPNO9gCZkGIcRHTrRNi1oNgPONqm9usOummBJHpN5dcmdEgD7+dbNnoHb1m9GhG8MDbqAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
    }

    .fa-eyes {
        width: 20px;
        height: 20px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA3ElEQVQ4T7WSbQ3CQBAFpw6QgAQkIAUJ4AAJOAAcIAEHgAMkgALINLvk2rvwp+kmTdr9ePd2eh0To5s4z2wCC2AFXMOh7y/gOXb8z8EB2MbAHvCpohRYRtVTfD8C78h9gF04KPsGDLS9Ceva1UFatqYbh81Zs6eCaOEE3IF1CNooi0uIe0iuNhAw6WCCU8hmo+ShsFDNDQSE5CmKjIdKAddQuIc6/gueasE9k4cAH7GaLBRLZ5WADQrcgDPgtyEHh7Tvqj3AloPMlwAz53rJ53cfZrvKrUvXzE128AXMbC8RW0vEqAAAAABJRU5ErkJggg==');
        background-repeat: no-repeat;
    }

<tr>
<th width="150">公众号appid</th>
<td>
<input class="form-control" type="text" name="appid" id="appid" value="{$config.appid}" />
</td>

<th width="150">公众号密钥</th>
<td>
<dd class="password">
<input class="form-control" type="password" name="appsecret" id="appsecret"
value="{$config.appsecret}" style="width: 90%;"/>
<i class="fa fa-eye-slashs"></i>
</dd>
</td>
</tr>

<script type="text/javascript">
        $(".password").on("click", ".fa-eye-slashs", function () {
            $(this).removeClass("fa-eye-slashs").addClass("fa-eyes");
            $(this).prev().attr("type", "text");
        });

        $(".password").on("click", ".fa-eyes", function () {
            $(this).removeClass("fa-eyes").addClass("fa-eye-slashs");
            $(this).prev().attr("type", "password");
        });
    </script>