How to display input as bullet marks in input number element?

Question

My user is required to input 5 digit number for a pass code. Once the number is entered in to the input number field the number should not be shown. It should be changed to a black color bullet. How do I achieve that?

Here is my 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>

Looking the result like this:

input type password with some validation so the user can only insert numbers should do it — Kevin Kloet, Sep 21 '17 at 13:20
I can't use that. Because if I use the password inputs, the mobile not showing the input number keypad automatically — 3gwebtrain, Sep 21 '17 at 13:22
[than do it programmatically](https://stackoverflow.com/questions/19126856/make-input-type-password-use-number-pad-on-mobile-devices) — Kevin Kloet, Sep 21 '17 at 13:23
To answer your original question, you could detect for input blur (leaving focus.) So, in doing such, you could obstruct the filed with an element of a higher z level, or otherwise add a class that achieves your desired effect. — Greg, Sep 21 '17 at 14:02
Possible duplicate of [Make password textbox value visible after each character input](https://stackoverflow.com/questions/37186309/make-password-textbox-value-visible-after-each-character-input) — CBroe, Sep 21 '17 at 15:03
https://www.sitepoint.com/better-passwords-1-the-masked-password-field/ should also be easy enough to adapt. — CBroe, Sep 21 '17 at 15:04

Sil Cia · Answer 1 · 2017-09-21T17:50:50.000

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/

score 0 · Answer 2 · answered Sep 21 '17 at 13:47

0

I use this approach this is much better:

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

answered Sep 21 '17 at 13:47

3gwebtrain

14,640
25
121
247

How to display input as bullet marks in input number element?

2 Answers2