第一、首先准备两张眼睛的照片,例如下图(也可以去找自己喜欢的)
第二、Html样式:
<div class="see">
<img src="~/Condent/img/openeye.png" id="openEye" style="display:none;" />
<img src="~/Condent/img/closeeye.png" alt="隐藏密码" id="closeEye" />
</div>
第三、js代码
//------------------登录页面密码长按显示或隐藏--------------------
//鼠标松开时密码隐藏
$("#openEye").mouseup(function () {
//修改input标签的类型
$("#userPassword2").attr("type", "password");
//显示密码的图片隐藏
$("#openEye").hide();
//隐藏密码的图片显示
$("#closeEye").show();
});
//鼠标按下时密码显示
$("#closeEye").mousedown(function () {
//修改input标签的类型
$("#userPassword2").attr("type", "text");
//隐藏密码的图片显示
$("#closeEye").hide();
//显示密码的图片隐藏
$("#openEye").show();
});
//鼠标移出时,密码隐藏
$("#openEye").mousemove(function () {
//修改input标签的类型
$("#userPassword2").attr("type", "password");
$("#openEye").hide();
$("#closeEye").show();
});
最后:长按眼睛的图片就会显示密码了
这是我所学到的一些知识,在此分享给大家,希望可以帮助到你们。
以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!