how to make password textbox value visible when hover an icon

Question

Good day all   I have a form that has a password field    lt input type  password  name  password  size  30    gt    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

User · Answer

lt script gt         function seetext x              x type    text                   function seeasterisk x             x type    password                lt  script gt     lt body gt       lt img onmouseover  seetext a   onmouseout  seeasterisk a   border  0  src  smiley gif    alt  Smiley  width  32  height  32  gt      lt input id    a  type    password   gt    lt  body gt    Try this see if it works

User · Answer

a rapid response not tested on several brosers  works on gg chrome   win  -  On focus event -  show hide password   lt input type  password  name  password  gt    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

User · Answer

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    lt input name  password  class  password  type  password    gt   lt div class  icon  gt icon lt  div gt    jQuery       icon   hover function              password   attr  type    text       function              password   attr  type    password

User · Answer

Try This    In HTML and JS     x000D   x000D     Convert Password Field To Text On Hover  x000D    var passField      input type password     x000D        show-pass   hover function     x000D        passField attr  type    text    x000D       function     x000D      passField attr  type    password    x000D       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   lt  -- An Input PassWord Field With Eye Font-Awesome Class -- gt  x000D   lt input type  password  placeholder  Type Password  gt  x000D         lt i class  show-pass fa fa-eye fa-lg  gt  lt  i gt  x000D   x000D   x000D

User · Answer

Complete example below  I just love the copy paste         HTML   lt div class  container  gt       lt div class  row  gt           lt div class  col-md-8 col-md-offset-2  gt              lt div class  panel panel-default  gt                 lt div class  panel-body  gt                     lt form class  form-horizontal  method    action    gt                         lt div class  form-group  gt                           lt label class  col-md-4 control-label  gt Email lt  label gt                              lt div class  col-md-6  gt                                  lt input type  email  class  form-control  name  email  value    gt                              lt  div gt                        lt  div gt                        lt div class  form-group  gt                          lt label class  col-md-4 control-label  gt Password lt  label gt                             lt div class  col-md-6  gt                                 lt input id  password-field  type  password  class  form-control  name  password  value  secret  gt                                 lt span toggle   password-field  class  fa fa-lg fa-eye field-icon toggle-password  gt  lt  span gt                             lt  div gt                        lt  div gt                    lt  form gt                 lt  div gt              lt  div gt         lt  div gt     lt  div gt      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               Try it here  https   codepen io anon pen ZoMQZP

User · Answer

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

User · Answer

In one line of code as below     x000D   x000D   lt p gt  cursor on text field shows text  if not password will be shown lt  p gt  x000D   lt input type  password  name  txt password  onmouseover  this type  text   x000D         onmouseout  this type  password   placeholder  password    gt  x000D   x000D   x000D

User · Answer

I use this one line of code  it should do it    lt input type  password         onmousedown  this type  text          onmouseup  this type  password          onmousemove  this type  password   gt

User · Answer

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    lt input type  password  name  password  id  myPassword  size  30    gt   lt img src  theicon  onmouseover  mouseoverPass     onmouseout  mouseoutPass       gt    JS   function mouseoverPass obj      var obj   document getElementById  myPassword      obj type    text     function mouseoutPass obj      var obj   document getElementById  myPassword      obj type    password

User · Answer

lt html gt   lt head gt   lt  head gt   lt body gt   lt script gt  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                       lt  script gt       lt form method  post  gt  Password   lt input type  password  name  pass f  maxlength  30  id  show f  gt  lt input type  button  onclick  demo    id  s1  value  show  style  height 25px  margin-left 5px margin-top 3px   gt  lt br gt  lt br gt   lt input type  submit  name  sub  value  Submit Now  gt    lt  form gt   lt  body gt   lt  html gt

User · Answer

1 minute googling gave me this result  See the DEMO   HTML   lt form gt       lt label for  username  gt Username  lt  label gt       lt input id  username  name  username  type  text  placeholder  Username    gt       lt label for  password  gt Password  lt  label gt       lt input id  password  name  password  type  password  placeholder  Password    gt       lt input id  submit  name  submit  type  submit  value  Login    gt   lt  form gt    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   lt input class  passText  placeholder      elPH      type  text    gt            form   append   lt small gt  lt a class  togglePassText  href     gt Toggle Password Visibility lt  a gt  lt  small gt         ----- 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        lt -- prevent any default actions       CSS   offPage       position  absolute      bottom  100       right  100

[javascript] how to make password textbox value visible when hover an icon

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css