如何在输入数字元素中将输入显示为项目符号？答案

【问题标题】：How to display input as bullet marks in input number element?如何在输入数字元素中将输入显示为项目符号？
【发布时间】：2018-03-02 20:51:22
【问题描述】：

我的用户需要输入 5 位数字的密码。将号码输入到input 号码字段后，不应显示该号码。它应该更改为黑色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>

查看结果如下：

【问题讨论】：

所以输入类型密码不合适
输入密码并进行一些验证，因此用户只能插入数字应该这样做
我不能用那个。因为如果我使用密码输入，手机不会自动显示输入数字键盘
than do it programmatically
要回答您的原始问题，您可以检测输入模糊（离开焦点）。因此，在这样做时，您可以使用更高 z 级别的元素来遮挡文件，或者添加一个类达到你想要的效果。

标签： javascript jquery html css

【解决方案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/

【讨论】：

【解决方案2】：

我使用这种方法效果更好：

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

【讨论】：