how to make password textbox value visible when hover an icon

show password eye icon bootstrap
show password eye icon jquery
show password eye bootstrap
fa fa-fw fa-eye field-icon toggle-password
toggle password visibility eye
show password eye bootstrap 4
show password eye icon html w3schools
show hide password codepen

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.


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

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.


<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />


function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";

How To Toggle Password Visibility, Password field --> Password: <input type="password" value="FakePSW" id="​myInput"> <!-- An element to toggle between password visibility --> To create a password text box. Set the PasswordChar property of the TextBox control to a specific character. The PasswordChar property specifies the character displayed in the text box. For example, if you want asterisks displayed in the password box, specify * for the PasswordChar property in the Properties window. Then, regardless of what character a user types in the text box, an asterisk is displayed.

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

See my simple jquery demo:


<input name="password" class="password" type="password" />
<div class="icon">icon</div>


$('.icon').hover(function () {
    $('.password').attr('type', 'text');
}, function () {
    $('.password').attr('type', 'password');

Show/Hide password field, <input id="password-field" type="password" class="form-control" name="​password" value="secret">. 19. <span toggle="#password-field" class="fa fa-fw fa​-eye  By clicking the checkbox or hovering the mouse on the icon, we can make the password visible. Step 1 Create a new project in the Visual Studio version of your choice with an empty template. Give it a meaningful name. Step 2 Add a web form to your project. Right-click and choose a new item, select web form, and give it a name. Step 3 Add jQuery, bootstrap, and fa icon cdn links to the head section.

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

<input type="password"

.net: how to make password textbox value visible when hover an icon, <html > <head > <title></title> <script> function mouseoverPass(obj) { var obj = document.getElementById('myPassword'); obj.type = "text"; } How to Show/Hide Password in TextBox with Button using jQuery. Download Source Code --

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


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


.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;

  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:

How to make password textbox value visible when hover an icon, </script> </head> <body> <div> <input type="password" name="password" id="​myPassword" size="30" /> <img src="ui-icon-pack-14-512.png"  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

1 minute googling gave me this result. See the DEMO!


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


// ----- 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').keyup(function () {
    var elText = $(this).val();

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


.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;

Show and hide password using JavaScript, 1)Create a HTML form which contain an input field of type password. 2)Create a Hide or show HTML elements using visibility property in JavaScript · How to Show and Hide div elements using Checkboxes ? How to display icon next to show/hide text on button? How to store a key=> value array in JavaScript ? I have a screen where the user must make a selection between 2 images. I would like to have a "spotlight" or an image/icon appear to give the user a visual indicator of their choice. (Maybe an arrow that appears below the image) when the user hovers over the image. When the user clicks the image, then it will navigate to the next screen.

Password Show Hide when click on eye icon on login page using , Click on button or icon to show hide enter password text in input box, just you need to add <input type="password" name="password" id="password" value​="" >, { Now we adding jquery to change class and password visibility  In this tutorial you'll learn about how you can set a placeholder text in a text box using visual C#. How to set PlaceHolder text / Watermark in a textbox C# How To Hide And Show Password

Bootstrap, bootstrap show hide password example, jquery show hide password field, We can also set toggle hide show password input field. Ok, you can copy bellow code and run in your machine OR also you can check demo by click on eye icon. How to set multiple selected value in Chosen Jquery Plugin? when i select a item from drp1 (drp1 set to autopostback true) then textbox1 is visible coz of post back it is visible. But when i select a value from drp2 then textbox2 will visible but textbox1 will invisible.Because when i select a value from drp2 again page will refresh So on page load i set a textbox will be invisible.

HTML input type password field, HTML <input type=”password”> element is where you should make the user type if the password is already hidden view it and change the icon to a crossed eye. assigned it to password.value which is the value of out password input field,  (which means to get the button back I either need to use the advanced property pane, or find a way to make it visible again in run time). 2. I wish I had a "on focus" for the screen, so that when the app starts it resets everything to visible.

  • You'll need javascript for this. Adding a "mouseover/mouseout" on the icon as the events to hook should work. Then you just need to change the <input> field to "text" and back to "password". This post is relevant…
  • it worked fine in chrome and Firefox but not on IE.. I've IE 10
  • This is working fine with IE 10, I turned off the compatibility View. What about old IEs?
  • This is pretty basic and low level javascript so this should be compatible to very old browsers.
  • It should be onmouseover and onmouseout.
  • this is the perfect solution, thank you SO MUCH
  • what phrase did you use for searching?
  • input type password visible
  • Why in Odin's name does one get jQuery mumble jumble when the question clearly addresses plain and clean JavaScript for an answer?
  • only works if you set var a = document.getElementById('a'); globally before