how to make password textbox value visible when hover an icon

前端未结

关注

 11  1073

误落风尘

Good day all,

I have a form that has a password field:

Naturally, the i

相关标签:

11条回答

谎友^

2021-01-31 03:36

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)

说谎

2021-01-31 03:42

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)

滥情空心

2021-01-31 03:44

Its simple javascript. Done using toggling the type attribute of the input. Check this http://jsfiddle.net/RZm5y/16/

0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2021-01-31 03:45
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)
发布评论:

提交评论
- 加载中...

忘了有多久

2021-01-31 03:47

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

渐次进展

2021-01-31 03:47

a rapid response not tested on several brosers, works on gg chrome / win

-> On focus event -> show/hide password

<input type="password" name="password">

script 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');

});

0 讨论(0)

1 2 下一页