密码框明文显示（layui）

记录一个小功能：

layui登录页面通过jquery和css样式控制密码是否显示。

图片可访问：https://blog.csdn.net/qq_42142258/article/details/105154247

效果如下：

 

代码预览：

首先是在密码框后面添加需要显示的图标，我添加了两个图标：smile和cry （layui自带的图标）；

然后，设置cry隐藏，初始化显示smile。

<div class="icon-css-view">
    <i id="iconShowView" class="layui-icon layui-icon-face-smile"
       style="color: lawngreen;"></i>
    <i id="iconHiddenView" class="layui-icon layui-icon-face-cry"
       style="color: orangered;" hidden></i>
</div>

-----------------------------

在layui.use中设置点击事件。

1、控制密码框的type属性

2、控制图标的显示与隐藏

-----------------------------

// 是否显示密码
var password = $("#password");
$("#iconShowView").on('click', function(e){
    console.log("smile");
    password[0].type = "text";
    $("#iconShowView")[0].hidden = true;
    $("#iconHiddenView")[0].hidden = false;
    form.render();
});
$("#iconHiddenView").on('click', function(e){
    console.log("cry");
    password[0].type = "password";
    $("#iconShowView")[0].hidden = false;
    $("#iconHiddenView")[0].hidden = true;
    form.render();
});

-----------------------------

最后调整css样式，让图标显示在文本框内部。

此处是div的class。

-----------------------------

.icon-css-view {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 7px;
    right: 0px;
    text-align: center;
}

-----------------------------

参考博客：https://blog.csdn.net/qq_42142258/article/details/105154247

表示感谢！