Question

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

这是我的HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

查看结果如下：

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/

Answer 2

我使用这种方法要好得多：

<input type="number" pattern="[0-9]*" inputmode="numeric" min="0" max="9" style="-webkit-text-security: disc;" autofocus />

如何在输入数字元素中显示输入为子弹标记？

2 个答案: