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

Question

美好的一天,

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

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

当然,输入文本将被(*)替换.

因此,如果用户键入123该框将显示***.

到目前为止,这是直截了当的,但......

现在,我想在密码框旁边添加一个小图标,这样当用户将鼠标悬停在此图标上时,他就能看到他到目前为止输入的内容.

因此,在悬停时,框会显示123,当用户离开图标时,框应该***再次显示.

有没有办法用JavaScript做到这一点？另外,我使用的是HTML和PHP.

编辑:

它真的不需要是一个图标,它可以是一个复选框或按钮......如果它可以在CSS中完成,我真的很感激知道如何

PS我用谷歌搜索并搜索stackoverflow但没有运气

Answer 1

您将需要移动鼠标在它的时候通过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";
}

Answer 2

正如这些家伙所说,只需改变输入类型.
但是别忘了改回类型.

看我简单的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');
});

Answer 3

我使用这一行代码,应该这样做:

<input type="password"
       onmousedown="this.type='text'"
       onmouseup="this.type='password'"
       onmousemove="this.type='password'">

Answer 4

完整示例如下.我只是喜欢复制/粘贴:)

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");
   }
});

在这里试试:https://codepen.io/anon/pen/ZoMQZP

Answer 5

在如下一行代码中：

<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" />