huiru2000 2021-05-19 16:41 采纳率: 71.4%
浏览 61
已采纳

JS提问，为什么input 密码显示隐藏不成功

大佬们，我点击密码框右侧 小眼睛，但是没反应，请问怎么回事？

 <style>
        #pwd{width:200px;height:30px;background:url('eye开.png') no-repeat right ;background-size: contain;}
    </style>
</head>
<body>
    密码： <input id="pwd"  type="password"  placeholder="请输入密码" >   
    <script>
        var pwd=document.getElementById("pwd")
        var img=document.getElementById("pwd").style.backgroundImage
        img.onclick=function(){
            if(pwd.type == "password"){                    
                pwd.type = 'text'
                img.src = 'eye闭.png'
            }else{
                pwd.type = 'password'
                img.src = 'eye开.png'
            }
        }
    </script>
  • 写回答

3条回答 默认 最新

  • Go 旅城通票 2021-05-19 17:41
    关注

    给pwd dom对象添加事件，img是字符串哪来的事件。而且设置pwd的backgroundImage

    <style>
    #pwd {
        width: 200px;
        height: 30px;
        background: url('eye开.png') no-repeat right;
        background-size: contain;
    }
</style>
</head>
<body>
    密码： <input id="pwd" type="password" placeholder="请输入密码">
    <script>
        var pwd = document.getElementById("pwd")
        pwd.onclick = function () {
            if (pwd.type == "password") {
                pwd.type = 'text'
                pwd.style.backgroundImage = 'url(eye闭.png)';
            } else {
                pwd.type = 'password'
                pwd.style.backgroundImage = 'url(开闭.png)';
            }
        }
    </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥30 关于用python写支付宝扫码付异步通知收不到的问题
  • ¥50 vue组件中无法正确接收并处理axios请求
  • ¥15 隐藏系统界面pdf的打印、下载按钮
  • ¥15 MATLAB联合adams仿真卡死如何解决(代码模型无问题)
  • ¥15 基于pso参数优化的LightGBM分类模型
  • ¥15 安装Paddleocr时报错无法解决
  • ¥15 python中transformers可以正常下载，但是没有办法使用pipeline
  • ¥50 分布式追踪trace异常问题
  • ¥15 人在外地出差，速帮一点点
  • ¥15 如何使用canvas在图片上进行如下的标注，以下代码不起作用,如何修改