Question

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

Answer 1

这个jQuery插件可以满足您的需求：https://code.google.com/p/dpassword/

The blog post contains the details

另一种选择是使用复选框（“显示密码？”）交换字段类型。在input和text之间切换password元素的类型应该可以实现此目的。如果这不起作用，则需要创建一个新的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

请注意，显示密码确实会影响安全性。

Answer 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 处的位置，然后根据您在输入字段更新后获得的内容修改记录的值。复杂得多

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

如何显示输入密码输入类型的文本，否则隐藏密码

3 个答案: