密码输入框的显示/隐藏

最新推荐文章于 2023-11-23 13:04:56 发布

依旧平凡

最新推荐文章于 2023-11-23 13:04:56 发布

阅读量1.8k

点赞数

分类专栏： input密码的显示与隐藏文章标签： input密码的显示与隐藏

本文链接：https://blog.csdn.net/yijiupingfan0914/article/details/79987984

版权

input密码的显示与隐藏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<li class="aui-list-item">
    <div class="aui-list-item-inner">
        <div class="aui-list-item-label">用户名</div>
        <div class="aui-list-item-input">
            <input type="text" placeholder="请输入用户名" id="username" name="username">
        </div>
        <div class="aui-list-item-input" style="width:15%;">
        </div>
    </div>
</li>
<li class="aui-list-item">
    <div class="aui-list-item-inner">
        <div class="aui-list-item-label">密&nbsp;&nbsp;&nbsp;码</div>
        <div class="aui-list-item-input">
            <input type="password" placeholder="请输入密码" id="password" name="password">
        </div>
        <div class="aui-list-item-input" style="width:15%;">
            <img src="./img/yy.gif" alt="显示密码" id="openEye">
            <img src="./img/eye_closed.png" alt="隐藏密码" id="closeEye" style="display:none;">
        </div>
    </div>
</li>

$("#openEye").click(function(){
    $("#password").attr("type","text");
    $("#openEye").hide();
    $("#closeEye").show();
});
$("#closeEye").click(function(){
    $("#password").attr("type","password");
    $("#closeEye").hide();
    $("#openEye").show();
});