js 实现 input密码框密码的显示和隐藏功能

cofecode

于 2019-02-25 09:54:21 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery js 文章标签： js jQuery

本文链接：https://blog.youkuaiyun.com/cofecode/article/details/87911729

js 同时被 2 个专栏收录

25 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了一种在网页中实现密码输入框明文显示与隐藏的方法，通过使用Bootstrap图标和jQuery，实现在鼠标按下时显示密码，鼠标抬起时隐藏密码的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标按下时，密码铭文显示，鼠标抬起时，密码铭文不显示

blade模板
这里使用了bootstrap 的icon font

<input type="password" value="{{ old('password') }}" >
<i onmouseup="Pwdtag(this,false)" onmousedown="Pwdtag(this,true)" class="glyphicon glyphicon-eye-close"></i>

js部分

操作i标签的上一个元素prev()，也即input标签的type属性

function Pwdtag (obj,flag) {
    if (flag) {
        $(obj).removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open')
        $(obj).prev().attr('type','text')
    } else {
        $(obj).removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close')
        $(obj).prev().attr('type','password')
    }
}