实现input密码框显示/隐藏的功能 |
您所在的位置：网站首页 › layui密码框输入密码先显示 › 实现input密码框显示/隐藏的功能 |
实现input密码框显示/隐藏的功能
|
现在很多地方的注册都只有一个密码框，然后再加个显示/隐藏按钮，这样做很简洁，不用再很繁琐的输入两遍密码，用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案： 1. 首先来个密码框 2.CSS让显示/隐藏按钮放在密码框的最右侧 .password{ position: relative; } .password .n-txtCss{ width:90% !important; } .password .fa{ position: absolute; right: 10px; top:15px; font-size: 20px; cursor: pointer; }3.JS实现$(".password").on("click", ".fa-eye-slash", function () { $(this).removeClass("fa-eye-slash").addClass("fa-eye"); $(this).prev().attr("type", "text"); }); $(".password").on("click", ".fa-eye", function () { $(this).removeClass("fa-eye").addClass("fa-eye-slash"); $(this).prev().attr("type", "password"); });效果图
|
【本文地址】