如何在悬停图标时使密码文本框值可见?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我有一个有密码字段的表单

<input type="password" name="password" size="30" />

所以如果用户输入123盒子会显示出来***

我想添加一个小图标旁边的密码框,所以当用户悬停在这个图标,他可以看到他已经输入到目前为止。

所以,在悬停的情况下,盒子会显示出来123当用户悬停图标时...框应该显示***再一次

有什么方法可以用JavaScript来完成吗?而且,我使用html和php。

提问于
用户回答回答于

当移动鼠标并更改其上时,将需要通过javascript获取文本框。typetext。当你把它搬出去时,你会想把它改回来password。在纯CSS中没有机会这样做。

HTML:

<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />
function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
}
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";
}
用户回答回答于

HTML:

<input name="password" class="password" type="password" />
<div class="icon">icon</div>

jQuery:

$('.icon').hover(function () {
    $('.password').attr('type', 'text');
}, function () {
    $('.password').attr('type', 'password');
});

扫码关注云+社区

领取腾讯云代金券