Masking a social security number input

Question

For a web application I'm building privacy is very important and so is the format users input their data.

To help with this I have inserted a jquery library that will help mask the fields http://igorescobar.github.io/jQuery-Mask-Plugin/

However, I seem to be having trouble masking social security numbers. For instance, the format is coming through nicely 567-78-7890, but I can't seem to figure out how to mask or hide those first four numbers... like *--7890.

My html is just an input field

<input class='social' />

and with this plugin I have tried masking it as

$('.social').mask('000-00-0000');

This is just providing formatting

$('.newsocial').mask('xxx-xx-0000');

This will just replace the numbers they have entered with x's.

I have also set up a jsFiddle to help http://jsfiddle.net/w2sccqwy/1/

Any help would be wonderful!

P.S. I cannot use a password field because the last four numbers have to be shown to the user and I cannot have more than one field. This is a company requirement. I cannot change a company requirement as much as I want to.

Answer 1

For anyone who might run into this in the future I was able to figure out a solution that will mask any kind of field and format it without messing with any other plugin.

In the html you would need two inputs

<input class='number' />
<input class='value' />

and then position the number field over the value

and then in your javascript

 $('.value').on('keydown keyup mousedown mouseup', function() {
     var res = this.value, //grabs the value
         len = res.length, //grabs the length
         max = 9, //sets a max chars
         stars = len>0?len>1?len>2?len>3?len>4?'XXX-XX-':'XXX-X':'XXX-':'XX':'X':'', //this provides the masking and formatting
        result = stars+res.substring(5); //this is the result
     $(this).attr('maxlength', max); //setting the max length
    $(".number").val(result); //spits the value into the input
});

And a jsFiddle for those who would like to see the result. http://jsfiddle.net/gtom9tvL/

Answer 2

This is code I adapted from pure javascript mask for phone from Javascript phone mask for text field with regex. I created a codepen here http://codepen.io/anon/pen/LxWVoV

function mask(o, f) {
    setTimeout(function () {
        var v = f(o.value);
        if (v != o.value) {
            o.value = v;
        }
    }, 1);
}

function mssn(v) {
    var r = v.replace(/\D/g,"");
    if (r.length > 9) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
        return r;
    }
    else if (r.length > 4) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
    }
    else if (r.length > 2) {
        r = r.replace(/^(\d\d\d)(\d{0,3})/,"$1-$2");
    }
    else {
        r = r.replace(/^(\d*)/, "$1");
    }
    return r;
}

To use it, add onblur and onkeyup to the input field

<input type="text" value="" id="ssn" onkeyup="mask(this, mssn);" onblur="mask(this, mssn)">

Answer 3

$(".social, .newsocial").on("keydown keyup", function(e) {
    $(this).prop("value", function(i, o) {
        if (o.length < 7) {
          return o.replace(/\d/g,"*")
        }
    })
})

http://jsfiddle.net/w2sccqwy/3/

Answer 4

I'm coming across this in 2020 during some UI/UX research. What I'm seeing a lot of right now are variations on the following:

<input id='set1' type='password' maxLength='3' minLength='3'>
"-"
<input id='set2' type='password' maxLength='2' minLength='2'>
"-"
<input id='set3' type='text' maxLength='4' minLength='4' pattern='[0-9]*'>

You can also add inputmode='numeric' to enable the number-based type pad on mobile.

Answer 5

This should work.

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.modelssn = '';
});

app.directive("ssnInput",function(){
    return {
        require:'ngModel',
        link: function(scop, elem, attr, ngModel){
            $(elem).mask("999-99-9999");
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
            $(elem).focusin(function(){
                $(elem).val(temp);
            });
            $(elem).on('blur',function(){
                temp = $(elem).val();
                if(regxa.test($(elem).val())){
                   $(elem).val("XXX-XX" + temp.slice(6));
               }
            });
        }
    }
});

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Enter SSN <input type="text" ng-model="modelssn" ssn-input >
    <p>Real SSN {{modelssn}} </p>
  </body>
</html>

Answer 6

In case its ever useful to others, I wanted to get this working with MVC model and MVC Validation with DataAnnotation. And I couldnt use any of the plugins and library. Finally was able to get this working with the script below with the caveat that it will mask after you tab out from field instead of masking at the time of typing each character.

    $('#SSN').mask("999-99-9999", { placeholder: 'nnn-nn-nnnn' });
    var temp;
    var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
    $('#SSN').focusin(function () {
        $('#SSN').val(temp);
    });
    $('#SSN').on('blur', function () {
        temp = $('#SSN').val();
        if (regxa.test($('#SSN').val())) {
            $('#SSN').val("XXX-XX" + temp.slice(6));
        }
    });

You will need a reference to jquery and jquery mask.