js實現輸入密碼之延遲星號和點擊按鈕顯示或隱藏

緣由

手機打開segmentfalut時，長時間不登陸了，提示要重新登陸，輸入的過程中看到輸入密碼時，延遲后再變成密文，很好奇，所以搗鼓了一下。本文實現了兩種密碼展示

代碼實現

1 先明后密

js實現輸入密碼后，先顯示當前輸入的一位密碼，然后再變成星號

<input id="ipt" type="text" /><br>

let val;
var str = ""; // 中間層
let ipt = document.getElementById('ipt');
ipt.addEventListener('keyup', function () {
  val = this.value;
  if (val.length >= str.length) {
    str += val; // 存取
  } else {
    str = str.substr(0, val.length)
  }
  this.value = val.replace(/./g, "*")
}, false)

2 按鈕顯示隱藏密碼

這個方法是通過一個按鈕去顯示和隱藏輸入后的密碼

<input id="pwd" type="password" /> <button>顯示密碼</button>

let pwd = document.getElementById('pwd')
    let btn = document.querySelector('button')
    let flag = true; // 狀態控制
    btn.onclick = function(){
      if(flag){
        btn.innerHTML = '隱藏密碼'
        pwd.type = 'text'
        flag = false
      }else{
        btn.innerHTML = '顯示密碼'
        pwd.type = 'password'
        flag = true
      }
    }