如何显示在密码输入类型中键入的文本，否则隐藏密码答案

【问题标题】：how to show text typed in a password input type otherwise hide the password如何显示在密码输入类型中键入的文本，否则隐藏密码
【发布时间】：2014-02-13 10:02:45
【问题描述】：

我想让用户看到他们在密码字段中输入的内容。例如，只要他们在字段中输入一个字母，他们就应该看到输入的内容，并且该字母应该变回其默认项目符号。

【问题讨论】：

您为什么要这样做？如果用户输入的密码不正确，您应该通知他们他们指定的密码不正确。否则，如果用户在输入密码时站在他们身后，我就可以从屏幕上读出用户密码。
你的意思是和苹果/iphone 一样有密码字段..？
类似这样的：sitepoint.com/better-passwords-1-the-masked-password-field ?
我试图编辑我之前的评论以添加此网址。 css-tricks.com/better-password-inputs-iphone-style 它有一些教程。最简单的方法是下载文件，然后就可以使用了。

标签： javascript jquery html input

【解决方案1】：

这个 jQuery 插件做你想做的事：https://code.google.com/archive/p/dpassword/

The blog post contains the details.

另一个选项是使用复选框（“显示密码？”）交换字段类型。在text 和password 之间切换input 元素的类型应该可以实现这一点。如果这不起作用，您需要创建一个新的input 元素并复制该值。

安全注意事项：密码被隐藏是有原因的。只是为了让您了解可能的攻击，以下是我所知道的：

如果智能手机放在键盘旁边的桌子上，那么the vibrations caused by typing can be recorded and the keys you pressed can be calculated from that。
如果从建筑物外部可以看到监视器，那么一台好的望远镜可以在很长的距离内读取您的屏幕。 If you wear glasses or there is a teapot, you can still read that at 30m.

因此请注意，显示密码会损害安全性。

【讨论】：

【解决方案2】：

基于@SubhamBaranwal 的答案，其主要缺点是丢失密码字段的值，您可以执行以下操作：

$(_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>

但是，这仍然是一个简单的实现，仅支持从末尾编辑密码（附加字符或退格）。对于完整的实现，您必须检查并记录每个 keyUp 处当前选择的位置，然后根据更新输入字段后获得的值修改记录的值。复杂得多

【讨论】：

【解决方案3】：

我想你想要这样的东西JSFiddle

HTML 代码 -

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

JS 代码 -

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

【讨论】：