how to show text typed in a password input type otherwise hide the password

Question

I want to allow users to see what they type in a password field. For instance, as soon as they type a letter in the field, they should see what was typed and the letter should change back to its default bullet.

Answer 1

This jQuery plugin does what you want: https://code.google.com/archive/p/dpassword/

The blog post contains the details .

Another option is to swap the type of the field using a checkbox ("Show password?"). Switching the type of the input element between text and password should achieve this. If that doesn't work, you need to create a new input element and copy the value.

Note on security: The password is hidden for a reason. Just to give you an idea of the possible attacks, here is the ones I know of:

1. If a smart phone is lying on the table next to your keyboard, then the vibrations caused by typing can be recorded and the keys you pressed can be calculated from that .

2. If the monitor is visible from outside the building, a good telescope can read you screen over quite a distance. If you wear glasses or there is a teapot, you can still read that at 30m .

So be aware that displaying a password does compromise security.

Related articles:

• I Spy Your PC: Researchers Find New Ways to Steal Data
• http://css-tricks.com/better-password-inputs-iphone-style/

Answer 2

Building uppon @SubhamBaranwal's answer that has the major drawback of losing the password field's value, you could do something like the following:

 $(_e => { const frm = $('#my-form'); const passField = frm.find('.pass'); const passCopy = $('<input type="hidden" />'); passCopy.prop('name', passField.prop('name')); passField.prop('name', null); passField.prop('type', 'text'); frm.append(passCopy); let timer; passField.on("keyup", function(e) { if (timer) { clearTimeout(timer); timer = undefined; } timer = setTimeout(function() { copyPass(); passField.val(createBullets(passField.val().length)); }, 200); }); function createBullets(n) { let bullets = ""; for (let i = 0; i < n; i++) { bullets += "•"; } return bullets; } function copyPass() { const oPass = passCopy.val(); const nPass = passField.val(); if (nPass.length < oPass.length) { passCopy.val(oPass.substr(0, nPass.length)); } else if (nPass.length > oPass.length) { passCopy.val(oPass + nPass.substr(oPass.length)); } } /* for testing */ frm.append('<input type="submit" value="Check value" />'); frm.on('submit', e => { e.preventDefault(); copyPass(); alert(passCopy.val() || "No Value !"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="my-form"> <input class="pass" type="password" name="pass" /> </form>

However, this remains a simplistic implementation that will only support editing the password from the end (appending characters or backspaces). For a full implementation, you'd have to check and record where the current selection lies at each keyUp, and then modify the recorded value according to what you get after the input field was updated. Far more complicated

Answer 3

I think you want something like this JSFiddle

HTML Code -

<input class="pass" type="password" name="pass" />

JS Code -

function createBullets(n) {
  var bullets = "";
  for (var i = 0; i < n; i++) {
    bullets += "•";
  }
  return bullets;
}


$(document).ready(function() {
  var timer = "";
  $(".pass").attr("type", "text").removeAttr("name");
  $("body").on("keyup", ".pass", function(e) {
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(".pass").val(createBullets($(".pass").val().length));
    }, 200);
  });
});