javascript - how to show text typed in a password input type otherwise hide the password - Stack Overflow

admin管理员组

文章数量:1424924

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.

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.

• javascript
• jquery
• html
• input

Share Improve this question Follow edited Nov 2, 2018 at 6:34 cske 2,24344 gold badges2727 silver badges2424 bronze badges asked Feb 13, 2014 at 10:02 user3107241user3107241 4111 silver badge33 bronze badges 4

• 3 Why would you want to do this? If a user types their password incorrectly you should notify them that the password they specified is incorrect. Otherwise I could just read a user's password off the screen if stood behind them when they're typing it in. – James Donnelly Commented Feb 13, 2014 at 10:04
• 2 You mean the same as apple/iphone does with there password fields..? – Carl0s1z Commented Feb 13, 2014 at 10:05
• 1 Something like this: sitepoint./better-passwords-1-the-masked-password-field ? – Robin Commented Feb 13, 2014 at 10:06
• 1 I was trying to edit my previous ment to add this url. css-tricks./better-password-inputs-iphone-style it has some kind of tutorial. And the easy way, download the files and you are ready to use. – Carl0s1z Commented Feb 13, 2014 at 10:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This jQuery plugin does what you want: https://code.google./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 promise security.

Related articles:

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

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

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

本文标签： javascripthow to show text typed in a password input type otherwise hide the passwordStack Overflow