layui表单+显示和隐藏密码

最新推荐文章于 2025-09-11 02:20:21 发布

原创最新推荐文章于 2025-09-11 02:20:21 发布 · 4.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

记录学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于layui框架实现的密码输入框功能，通过点击图标可在显示与隐藏密码之间切换。利用jQuery实现了该功能，并结合了layui的样式布局。

 <div class="layui-form-item">
                                    
                                    <div class="layui-inline">
                                        <label class="layui-form-label">密 码</label>
                                        <div class="layui-input-inline" >

                                            <input type="password" name="password" id="password" required lay-verify="required||password" placeholder="请输入密码" autocomplete="off" class="layui-input" th:value="${session.userinfo.password}" >

                                        </div>
                                        <!--<div class="layui-form-mid">-</div>-->
                                        <div class="layui-input-inline" style="width: 20px;margin-top:10px ">
                                            <a href="javascript:void(0);" id="show" style="text-decoration:none;"><i class="iconfont iconyanjing_bi" id="iconyanjing_bi" ></i></a>
                                        </div>

                                    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/bootstrap3/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript">
    $("#show").on("click", ".iconyanjing_bi", function () {
        $(this).removeClass("iconyanjing_bi").addClass("iconyanjing");
        $("#password").attr("type", "text");
    });

    $("#show").on("click", ".iconyanjing", function () {
        $(this).removeClass("iconyanjing").addClass("iconyanjing_bi");
        $("#password").attr("type", "password");
    });

</script>