CODEWITHSUNDEEP
javascriptjquery
zazvorniki
zazvorniki

Reputation: 3602

Masking a social security number input

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.

Upvotes: 17

Views: 69848

Answers (6)

John Meade
John Meade

Reputation: 162

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.

Upvotes: 2

Vipul
Vipul

Reputation: 3

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.

Upvotes: 0

ideeps
ideeps

Reputation: 399

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="[email protected]" 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>

Upvotes: 0

Nicolas Giszpenc
Nicolas Giszpenc

Reputation: 703

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)">

Upvotes: 4

zazvorniki
zazvorniki

Reputation: 3602

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/

Upvotes: 14

guest271314
guest271314

Reputation: 1

$(".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/

Upvotes: 2

Related Questions