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

标签 javascript jquery html css

我的用户需要输入 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>

结果如下: Masked Number

最佳答案

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/

关于javascript - 如何在输入数字元素中将输入显示为元素符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46344995/

相关文章:

javascript - 访问 json 变量 (node.js)

jquery - 通过 jQuery 在 YouTube 嵌入电影中启用自动播放

javascript - 将字符串分成几部分并用 js 将每一部分包装在 html 中

java - 如何使用 multipart 使用 XMLHttpRequest 上传文件?

javascript - 如何在 NodeJS 中添加对 Web 服务的引用

javascript - 更新 ng-options 使用的数组,刷新选定的对象

javascript - .replace() 用新的 DOM 元素替换任意文本

android - Android 手机上的 canvas.toDataURL 和 drawimage 问题

html5 创建一个列表

html - Internet Explorer 在 XHTML 1.0 严格验证的网页上挂起