展示效果地址:https://1963331542.github.io/inputPassword/

源代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>input密码框显示为星号“*”</title>
  </head>
  <body>
    <input type="text" />
    当前输入值为:<span></span>
  </body>
</html>
<script>
  var str = ""; //str变量用于存储密码
  //获取input元素
  var input = document.getElementsByTagName("input")[0];
  //获取span元素
  var span = document.getElementsByTagName("span")[0];
  input.oninput = function(evt) {
    var val = this.value; //取到输入框的值
    if (val.length > str.length) {
      //输入值
      str += val.charAt(val.length - 1);
    } else {
      //回删值
      str = str.substr(0, val.length);
    }
    //将输入框除最后一位的字符替换成*
    this.value =
      val.substr(0, val.length - 1).replace(/./g, "*") +
      val.charAt(val.length - 1);
    /* 取当前输入框长度,用于判断是否正在输入
    停止输入时,一秒后将最后一个字符变成*号 */
    var len = this.value.length;
    setTimeout(() => {
      /*这时的this指向在延迟器触发时输入框的状态,
    而不是延迟器创建时的状态*/
      if (this.value.length == len) {
        //一秒后输入框的值长度不变,将所有字符替换为*
        this.value = this.value.replace(/./g, "*");
      }
    }, 1000);
    span.innerHTML = str;
  };
</script>

 觉得不错的话推荐一下哦