javascript - 如何在输入数字元素中将输入显示为元素符号？

Question

我的用户需要输入 5 位数字作为密码。在 input number 字段中输入号码后，该号码不应显示。它应该更改为黑色 bullet。我该如何实现？

这是我的 html:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input{
  text-align:center;
}

<div class="creditCardNumber">
  <input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
  <input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
  <input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
  <input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
  <input type="number" name="" min="0" max="9" maxlength="1" step="1" onKeyPress="if(this.value.length==1) return false;">
</div>

结果如下:

Answer 1

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input{
  text-align:center;
  width: 10%; 
  //Set the width of the inputs so changing the input type won't affect it.
}

//Go get those inputs -> returns an HTMLCollection
const inputs = document.getElementsByTagName("input");

//Let's turn that HTMLCollection into an array won't we?
const inputArray = Array.from(inputs);

//Ok now let's set up an array to store the user's password. This array has a length of "inputArray.length", so if you add more inputs, the array will grow accordingly.
let passwordArray = new Array(inputArray.length);

//Let's loop through the input. Oh yeah, let's pass the index also!
inputArray.forEach((input, index) => {
        //Ok now on "blur" event, we want to save the value of the input if existant.
    input.addEventListener("blur", () => {
        if(input.value.length !== 0) {
            //Get that value into that passwordArray.
          passwordArray.splice(index, 1, input.value);
          //Now for the trickery, let's change that input type back to password. So we can have that bullet.
          input.type = "password";
        }
    });
    //Alternatively, if the user wants to go back and change an input, let's change it back to input type number.
    input.addEventListener("focus", () => {
            input.addEventListener("focusin", () => {
              input.type = "number";
              input.value = "";
            });
    });
});





///////////////////////////////////////////////////////////////////////////////
///// Here's the non ES6 version if you're more comfortable with that ////////
/////////////////////////////////////////////////////////////////////////////

//Go get those inputs -> returns an HTMLCollection
var inputs = document.getElementsByTagName("input");

//Let's turn that HTMLCollection into an array won't we?
var inputArray = Array.from(inputs);

//Ok now let's set up an array to store the user's password. This array has a length of "inputArray.length", so if you add more inputs, the array will grow accordingly.
var passwordArray = new Array(inputArray.length);

//Let's loop through the input. Oh yeah, let's pass the index also!
inputArray.forEach(function (input, index) {
        //Ok now on "blur" event, we want to save the value of the input if existant.
    input.addEventListener("blur", function() {
        if(input.value.length !== 0) {
            //Get that value into that passwordArray.
          passwordArray.splice(index, 1, input.value);
          //Now for the trickery, let's change that input type back to password. So we can have that bullet.
          input.type = "password";
        }
    });
    //Alternatively, if the user wants to go back and change an input, let's change it back to input type number.
    input.addEventListener("focusin", () => {
      input.type = "number";
      input.value = "";
    });
});

https://fiddle.jshell.net/4xghnybf/7/