如何顯示以密碼輸入類型鍵入的文本，否則隱藏密碼

Question

我想讓用戶看到他們在密碼字段中輸入的內容。 例如，只要他們在字段中鍵入一個字母，他們就應該看到鍵入的內容，並且該字母應改回其默認項目符號。

Answer 1

這個 jQuery 插件可以滿足您的需求： https : //code.google.com/archive/p/dpassword/

博客文章包含詳細信息。

另一種選擇是使用復選框（“顯示密碼？”）交換字段的類型。 在text和password之間切換input元素的類型應該可以實現這一點。 如果這不起作用，您需要創建一個新的input元素並復制值。

安全注意事項：密碼隱藏是有原因的。 為了讓您了解可能的攻擊，以下是我所知道的：

1. 如果智能手機放在鍵盤旁邊的桌子上，則可以記錄打字引起的振動，並可以從中計算出您按下的鍵。

2. 如果從建築物外面可以看到監視器，那么好的望遠鏡可以在很遠的距離內讀取您的屏幕信息。 如果您戴眼鏡或有茶壺，您仍然可以在 30m 處閱讀。

因此請注意，顯示密碼確實會危及安全。

相關文章：

• 我監視你的電腦：研究人員找到竊取數據的新方法
• http://css-tricks.com/better-password-inputs-iphone-style/

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