HTML input for a numeric pin-CodePudding

I am trying to write a basic program that takes a username and a numerical pin. I was hoping that it would be possible to have the input type "number" and "password" for the same input so that the input would show asterisks/dots instead of the number, but it didn't work. Is there any way to accomplish this?

Thanks in advance!

This is what I tried:

<label for="pin">PIN:</label><br>
<input type="number" type="password" id="pin"><br><br>

From this Stack Overflow page I found that it is not possible to add two input types.

CodePudding user response：

You can't use two types for the same input, instead you should use password type input, and just allow introducing numbers.

You can use something like this:

<input type="password" pattern="[0-9]*" inputmode="numeric">

This is just a Regular expression allowing numbers.

CodePudding user response：

You can obscure the PIN input with the text-security CSS property, applied to the numeric input field. In the head of your HTML document, include this:

<style>
  input {
    text-security:disc;
    -webkit-text-security:disc;
    -moz-text-security:disc;
  }
</style>