实现input框输入时将值替换为*，停止输入一秒后将最后的字符替换为*

源代码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>input密码框显示为星号“*”</title>
  </head>
  <body>
    <input type="text" />
  </body>
</html>
<script>
  var str = ""; //str变量用于存储密码
  //获取input元素
  var input = document.getElementsByTagName("input")[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);
    console.log(this.value);
    console.log(str);
  };
</script>