如何在悬停图标时使密码文本框值可见
如何在悬停图标时使密码文本框值可见
提问于 2014-03-18 20:56:10
大家好，
我有一个表单，它有一个密码字段：
<input type="password" name="password" size="30" />当然，输入的文本将被替换为(*)。
因此，如果用户键入123，则框中将显示***。
到目前为止，一切都很简单，但是...
现在，我想在密码框旁边添加一个小图标，以便当用户将鼠标悬停在该图标上时，他可以看到到目前为止输入的内容。
因此，当鼠标悬停时，框将显示123，当用户离开图标时，框将再次显示***。
有没有办法用JavaScript做到这一点？另外，我使用的是HTML和PHP。
编辑：
它真的不需要是一个图标，它可以是一个复选框或按钮……如果它可以用CSS完成，我将非常希望知道是如何
附注:我用谷歌搜索了stackoverflow，但一无所获
回答 11
Stack Overflow用户
回答已采纳
发布于 2014-03-18 20:58:05
将鼠标移到文本框上时，需要通过javascript获取文本框，并将其type更改为text。在将其移出时，您需要将其更改回password。在纯CSS中不可能做到这一点。
HTML：
<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />JS：
function mouseoverPass(obj) {
var obj = document.getElementById('myPassword');
obj.type = "text";
}
function mouseoutPass(obj) {
var obj = document.getElementById('myPassword');
obj.type = "password";
}Stack Overflow用户
发布于 2014-03-18 21:09:20
正如这些人所说，只要改变输入类型即可。
但是也不要忘了把类型改回来。
请看我的简单的jquery演示：http://jsfiddle.net/kPJbU/1/
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');
});Stack Overflow用户
发布于 2016-12-09 15:12:46
我使用这一行代码，它应该能做到这一点：
<input type="password"
onmousedown="this.type='text'"
onmouseup="this.type='password'"
onmousemove="this.type='password'">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22480075
复制相关文章
相似问题