美好的一天，
我有一个包含密码字段的表单：
<input type="password" name="password" size="30" />
当然，输入文本将替换为（*）。
因此，如果用户输入123，则该框会显示***。
到目前为止，这是直截了当的，但是......
现在，我想在密码框旁边添加一个小图标，这样当用户将鼠标悬停在此图标上时，他就能看到他到目前为止所输入的内容。
因此，在悬停时，该框会显示123，当用户离开图标时，该框应再次显示***。
有没有办法用JavaScript做到这一点？另外，我使用的是HTML和PHP。
修改
它确实不需要是一个图标，它可以是一个复选框或按钮......如果它可以在CSS中完成，我真的很想知道如何
P.S。我用谷歌搜索并搜索stackoverflow但没有运气
答案 0 :(得分：34)
将鼠标移到文本框上并将其type更改为text时，您需要通过javascript获取文本框。将其移出时，您需要将其更改回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";
}
答案 1 :(得分：14)
正如这些家伙所说，只需更改输入类型 但是别忘了改回类型。
请参阅我的简单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');
});
答案 2 :(得分：7)
我使用这一行代码，应该这样做：
<input type="password"
onmousedown="this.type='text'"
onmouseup="this.type='password'"
onmousemove="this.type='password'">
答案 3 :(得分：5)
下面的完整示例。我只是喜欢复制/粘贴:)
<强> HTML
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<强> CSS
.field-icon {
float: right;
margin-right: 8px;
margin-top: -23px;
position: relative;
z-index: 2;
cursor:pointer;
}
.container{
padding-top:50px;
margin: auto;
}
<强> JS
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
答案 4 :(得分：4)
在下面的一行代码中：
<p> cursor on text field shows text .if not password will be shown</p>
<input type="password" name="txt_password" onmouseover="this.type='text'"
onmouseout="this.type='password'" placeholder="password" />
答案 5 :(得分：3)
1分钟的谷歌搜索给了我this result。请参阅 DEMO ！
HTML
<form>
<label for="username">Username:</label>
<input id="username" name="username" type="text" placeholder="Username" />
<label for="password">Password:</label>
<input id="password" name="password" type="password" placeholder="Password" />
<input id="submit" name="submit" type="submit" value="Login" />
</form>
的jQuery
// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
var el = $(this),
elPH = el.attr("placeholder");
el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');
// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
var elText = $(this).val();
$('.passText').val(elText);
});
$('.passText').keyup(function () {
var elText = $(this).val();
$('input[type=password]').val(elText);
});
// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
$('input[type=password], .passText').toggleClass("offPage");
e.preventDefault(); // <-- prevent any default actions
});
CSS
.offPage {
position: absolute;
bottom: 100%;
right: 100%;
}
答案 6 :(得分：0)
简单的javascript。使用切换输入的type属性完成。请检查此http://jsfiddle.net/RZm5y/16/
答案 7 :(得分：0)
<script>
function seetext(x){
x.type = "text";
}
function seeasterisk(x){
x.type = "password";
}
</script>
<body>
<img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<input id = "a" type = "password"/>
</body>
试试看看它是否有效
答案 8 :(得分：0)
试试这个：
在HTML中：
<!-- An Input PassWord Field With Eye Font-Awesome Class -->
<input type="password" placeholder="Type Password">
<i class="show-pass fa fa-eye fa-lg"></i>
在Jquery中：
// Convert Password Field To Text On Hover.
var passField = $('.password');
$('.show-pass').hover(function() {
passField.attr('type', 'text');
}, function() {
passField.attr('type', 'password');
})
如果您想要设计风格，请使用CSS。
.show-pass {
position: absolute;
top: 17px;
right: -30px;
}
答案 9 :(得分：0)
未经数个肉鸡测试的快速反应， 适用于gg chrome / win
->焦点事件->显示/隐藏密码
<input type="password" name="password">
脚本jQuery
// show on focus
$('input[type="password"]').on('focusin', function(){
$(this).attr('type', 'text');
});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){
$(this).attr('type', 'password');
});
答案 10 :(得分：-1)
<html>
<head>
</head>
<body>
<script>
function demo(){
var d=document.getElementById('s1');
var e=document.getElementById('show_f').value;
var f=document.getElementById('show_f').type;
if(d.value=="show"){
var f= document.getElementById('show_f').type="text";
var g=document.getElementById('show_f').value=e;
d.value="Hide";
} else{
var f= document.getElementById('show_f').type="password";
var g=document.getElementById('show_f').value=e;
d.value="show";
}
}
</script>
<form method='post'>
Password: <input type='password' name='pass_f' maxlength='30' id='show_f'><input type="button" onclick="demo()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;"><br><br>
<input type='submit' name='sub' value='Submit Now'>
</form>
</body>
</html>