**为了对用户更加的友好,对密码输入加以友好,提供显示用户输入的密码功能!

**

HTML密码框代码:

<div class="form-group">
    <label for="inputPassword" class="sr-only"></label>
 <input type="password" name="password" id="inputPassword" class="form-control"  placeholder="密码" required>
    <label onchange="show_pwd()" > <input type="checkbox"> 显示密码</label>
</div>

js代码:

<script type="text/javascript">
    function show_pwd(){
  if($("#inputPassword").attr("type") == "password"){
            $("#inputPassword").attr("type","text");   // 改变input的属即可实现
  } else {
            $("#inputPassword").attr("type","password");
        }
    }
</script>

小眼睛字体图标版

HTML密码框代码:

<div class="form-group">
    <label for="inputPassword" class="sr-only"></label>
 <input type="password" name="password" id="inputPassword" class="form-control"  placeholder="密码" required>
    <i onclick="show_pwd()" id="show-pass" class="fa fa-eye-slash" style="position: absolute;top: 30%;right: 5%"></i>
</div>

js代码:

function show_pwd(){
            if($("#inputPassword").attr("type") == "password"){
                $("#inputPassword").attr("type","text");    // 改变input的属即可实现
                $("#show-pass").removeClass("fa-eye-slash");
                $("#show-pass").addClass("fa-eye");
            }else {
                $("#inputPassword").attr("type","password");
                $("#show-pass").removeClass("fa-eye");
                $("#show-pass").addClass("fa-eye-slash");
            }
        }

本作品采用《CC 协议》，转载必须注明作者和本文链接