密碼框切換明文/密文的優(yōu)點(diǎn)這里就不多談绢慢，直接上效果圖吨述，以及代碼后豫。
效果圖：

image.png

image.png

代碼：
html：

 <div class="modal fade" id="changePWD" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="margin-top:120px;height:583px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改密碼</h4>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">原密碼</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control oldPassword" name="tc_name" value="" /><span class="eyes oldPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">新密碼</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control newPassword" name="tc_name" value="" /><span class="eyes newPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">確認(rèn)密碼</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control confirmPassword" name="tc_name" value="" /><span class="eyes confirmPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-5">
                            <button type="submit" class="btn btn-blue btn-sure" style="margin-left:35px;">確定</button>
                            <button type="submit" class="btn btn-default btn-cancel">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

js

  $changePWD
            .on("click", ".oldPWD", function () {
                if ($(".oldPassword").attr("type") == "password") {
                    $(".oldPassword").attr("type", "text");
                    $(".oldPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".oldPassword").attr("type", "password");
                    $(".oldPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })
            .on("click", ".newPWD", function () {
                if ($(".newPassword").attr("type") == "password") {
                    $(".newPassword").attr("type", "text");
                    $(".newPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".newPassword").attr("type", "password");
                    $(".newPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })
            .on("click", ".confirmPWD", function () {
                if ($(".confirmPassword").attr("type") == "password") {
                    $(".confirmPassword").attr("type", "text");
                    $(".confirmPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".confirmPassword").attr("type", "password");
                    $(".confirmPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })