Mask HTML password input

Question

I do have an unusual request, I am working on an application where two persons have to enter a random number between 1 and 1000 in an input[type=password] on the same screen - now I am looking for a way to hide how many numbers have been entered into the password field, fe

• Person 1: 29 = **
• Person 2: 587 = ***

I am looking for a way to always show ****

Hope you guys get my question.

Thanks a lot.

UPDATE

It looks like I was not able to describe what I "need" so here is an update with some pictures:

Person 1 enters the number 32, this will look like this:

Person 2 enters the number 325, this will look like this:

My goal is that the input always looks like this:

I just want to change the look of the field, not the value.

Answer 1

One way to do this is to update a state variable using the change event. Here is an example with jquery. (And assuming always displaying 4 asterisks)

var entered = "";

$("#my-input").change(function() {
    var newVal = $("#my-input").val();
    if (newVal.length < 4) {
        //backspace was pressed
        entered = entered.substr(0, entered.length - 1);
    } else if (newVal.length > 4) {
        //another key was pressed
        entered += newVal.substr(4);
    }
    $("#my-input").val("****");
});

$("#my-input").val("****");

This isn't foolproof, it will break down if the user selects,copies,pastes. etc.

While this will get you the effect you asked for, as other comments hinted at, it may not be the best user experience.

Answer 2

Heres a pretty hacky css way not sure about browser support but no JavaScript needed!

Codepen

HTML

<div class="test">
  <span>&middot;&middot;&middot;&middot;</span>
  <input type="password" />
</div>

CSS

.test{
  position:relative;
}
.test span{
  position:absolute;
  z-index:1;
  padding:5px; /** Match the input padding **/
  font-size:2em;
  line-height:.6em
}
input{
  z-index:0;
  text-indent:-9999px; /** Hide the text typed in **/
}

It's essentially just absolute positioning the dots over the input then hiding the text via text-indent

Answer 3

You can also use the CSS to make the text color same as the input field:

input[type=password] {
    color: white;
}

Edit: Or to be independent of input color like @GeraldSchneider commented:

input[type=password] {
    color: transparent;
}