How to show masked character (like asterisk '*') in input type number as numbers are typed

Question

I am using a html input type='number' field to set PIN no (no characters are allowed) but I want the characters to be masked as I type.

I am new in web development. Please help me out.

Check https://stackoverflow.com/questions/16883549/html-5-number-regular-expression — Jagruti, Feb 20 '19 at 06:21
check https://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox. You can use password field with key press restrictions to allow numeric values — balakrishnan, Feb 20 '19 at 06:22
I think the reason OP wants to use type="number" because it opens up the number keypad on mobile devices. Useful on PIN inputs. — kgbph, Feb 20 '19 at 06:29
thanks balakrishnan, but characters are not masked which is required. — Tanveer Hasan, Feb 20 '19 at 06:39

score 3 · Answer 1 · answered Feb 20 '19 at 06:40

3

You can use like this-

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

see details here

answered Feb 20 '19 at 06:40

Rasel

5,488
3
30
39

score 1 · Answer 2 · answered Feb 20 '19 at 06:26

1

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#Setting_length_requirements

I think this helps if you want to make input type='password' accept only numbers

answered Feb 20 '19 at 06:26

saketh

803
1
10
24

score 0 · Accepted Answer · edited Feb 20 '19 at 07:12

Solution with jQuery

$(function () {

  $('#pincode').bind('keyup paste', function () {
    this.value = this.value.replace(/[^0-9]/g, '');
  });

  $('#pincode').keyup(function () {
    var text = $(this).val().trim();
    $('#errorname').text(text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Enter PIN</label>
    <input type="password" name="pincode" id="pincode" maxlength="6" inputmode="numeric">
  </div>
  <div id="errorname"></div>
</form>

How to show masked character (like asterisk '*') in input type number as numbers are typed

3 Answers3