how to make password textbox value visible when ho

Good day all,

I have a form that has a password field:

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

Naturally, the input text will be replaced by (*).

So if the user typed 123 the box will show ***.

Up to here, it is straight forward, but...

Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.

So, while hovering, the box will show 123 and when the user leaves the icon the box should show *** again.

Is there any way to do this with JavaScript? Also, I am using HTML and PHP.

EDIT:

It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how

P.S. I've googled and search the stackoverflow but with no luck

标签： javascript jquery html css

11条回答

可以哭但决不认输i

2楼-- · 2020-05-15 14:58

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

Try this see if it works

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2020-05-15 14:59

You will need to get the textbox via javascript when moving the mouse over it and change its type to text. And when moving it out, you will want to change it back to password. No chance of doing this in pure 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";
}

0人赞添加讨论(0) 举报

在下西门庆

4楼-- · 2020-05-15 15:02

In one line of code as below :

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

0人赞添加讨论(0) 举报

放荡不羁爱自由

5楼-- · 2020-05-15 15:04

As these guys said, just change input type.
But do not forget to change type back as well.

See my simple jquery demo: 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');
});

0人赞添加讨论(0) 举报

Bombasti

6楼-- · 2020-05-15 15:07

Complete example below. I just love the copy/paste :)

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

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

Try it here: https://codepen.io/anon/pen/ZoMQZP

0人赞添加讨论(0) 举报

聊天终结者

7楼-- · 2020-05-15 15:08

I use this one line of code, it should do it:

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

0人赞添加讨论(0) 举报

1 2 下一页

how to make password textbox value visible when ho

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间