breaking into the unknown…

masking inputs : ssn

Leave a comment

Social Security Number is something secret like password and you do not want it to openly visible on form. You may want to apply some encryption over it, say hiding the first few digits. Below code will explain how to do it in jQuery.

Below, is a simple user form with ssn input field and a submit button

<form id="user_form">

   <input type="text" value="666170662" id="ssn">

   <input type="submit" value="Submit" id="apply-credit">


Below, is the jQuery code which will unmask the ssn i,e show it in clear text when user focus on it and mask it when cursor move out of the ssn input field. The logic is that, we will define two function, one for masking the input and other for retrieval of the original value. We will call the retrieval function when user click on the input field, so that he can see it clearly and edit it if he want, and before submitting the form, so the real ssn value get passed not the encrypted one. The masking function will be called at page load i,e when page get loaded and ssn remain masked and on blur i,e when ever user click outside the ssn input box.

NOTE : see the use of call function in below code. call will trigger the function with the argument passed to it, this first argument will be make the current objet i,e the this object. Some more discussion on this is available here


    var restoreValue = function(){
                        var $this = $(this),
                        val = $'value');
                        if (val) {

    var maskValue = function(){
                        var $this = $(this);
                        $'value', $this.val());
                        # assuming ssn is of 9 charecter, below line will replace first 7 with *
                        $this.val($this.val().replace(/^\d{7}/, '*******'));

            $('#ssn')[0], e) 


    # when submit button is click we will restore the original value
               $('#ssn')[0], e); # it will restore the original 
                                                               value before the submit
                         alert($('#ssn').val()) # I have alerted to show that ssn field now 
                                                  have the original value

The above function secure the ssn from form visibility, but if anyone inspect the form, he can still see the original ssn value i,e the function above just control the ssn display, not modify the actual ssn value. Due to security reason my client do not approved this approach. I have adopted some different approach of storing it in session variable and retrieving it from there, which has nothing to do with jQuery, so I have not explained it here.

By the way, It is good to introduce it for new user form. When user will fill his ssn value it will remain visible to him and when he move the cursor get encrypted so that other person seeing the screen can’t see it  🙂

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s