masking numbers to a special character (*) in input

Question

I am trying to mask all the numbers in SSN field to * while keeping user only enter numeric values and formatting the SSN with dashes.

Here is a fiddle link:

https://jsfiddle.net/7f8p83am/

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    var sizes = [3, 2, 4];
    var maxSize = 10;

    for (var i in sizes) {
      if (val.length > sizes[i]) {
        newVal += val.substr(0, sizes[i]) + '-';
        val = val.substr(sizes[i]);
      } else { 
        break; 
      }       
    }

    newVal += val;
    this.value = newVal;  
});

Obviously, the replace is getting rid of *. Any ideas on how to do this?

thanks in advance.

Do you have a variable somewhere that still contains the unmasked number? Otherwise, there's no way to retrieve the value during submit if you mask it as they type. — 4castle, May 25 '16 at 15:32
@4castle this came back to kick me in the head. do you have any suggestions? — CFNinja, May 27 '16 at 22:16

Rion Williams · Accepted Answer · 2016-05-25T15:38:42.307

You could consider removing all non-digits and asterisks as they were entered and replacing digits with asterisk :

// Remove all non-digits/asterisks and replace digits with asterisks
var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g,'*');

Additionally, you may want to try adding a maxlength attribute on your element as well to prevent it from continuing :

<input id='ssn' maxlength='11'/>

Finally, you will likely want to consider storing a hidden field or variable that will store your proper SSN value so that you can post it to the server as expected.

Example

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input id='ssn' maxlength='11' />
  <script>
    $(function() {
      $('#ssn').keyup(function() {
        var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g, '*');
        var newVal = '';
        var sizes = [3, 2, 4];
        var maxSize = 10;

        for (var i in sizes) {
          if (val.length > sizes[i]) {
            newVal += val.substr(0, sizes[i]) + '-';
            val = val.substr(sizes[i]);
          } else {
            break;
          }
        }

        newVal += val;
        this.value = newVal;
      });
    });
  </script>
</body>

</html>

@Rion Williams, I appreciate your answer but I have a problem Actually, I am doing some RND I have input type="text" not password. I want to implement the same thing (means replace number to *) but user can change any * form any position in textbox I want to persist original value to hidden textbox and finally send i.e. 12341 not ***** to server Means Same implementation of input type password If any jsFiddel link or plunker for same. — Ankit Pandey, Oct 09 '17 at 13:19
@AnkitPandey same problem i am facing this with vuejs. Unable to get the value at all. Any way for this? — , Oct 03 '21 at 20:49

masking numbers to a special character (*) in input

1 Answers1

Linked