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/
所以輸入型密碼是不適合 – Thusitha
輸入型密碼與一些驗證，因此用戶只能插入數字應該這樣做 –
我不能使用。因爲如果我使用密碼輸入，手機不會自動顯示輸入數字鍵盤 – 3gwebtrain