SSN Masking and Formatting

SSN Masking and Formatting

/* ---------------------------------------------------------------------------------------------
* myPass v1.0 - jQuery password-hiding iPhone-Style
*
* Copyright (c) 2009 Oliver Storm, Stefan Huissel( http://www.mysrc.de )
* Feel free to redistribute the script/modify it, as
*   long as you leave my infos at the top.
*
*
* Date Thu, 30 Jun 2009
*
* Defaults: charReplace -> Unicode for the symbol that will be displayed
*           instead of the character. You can find a good overview here:
*
*   charDuration -> Duration how long the last character will be shown when no
*   further input is made.
*
* Modified for SSN specific need - Sandeep Parmar  Date Tue, 02 July 2013
*
---------------------------------------------------------------------------------------------- */
(function ($) {

    $.fn.maskssn = function (options) {

        var defaults =
        {
            charReplace: '%u25CF',
            charDuration: 1000
        }

        var opts = $.extend(defaults, options);
        var active = null;

        $(this).each(function () {
            tempField = $(this).attr('name');
            $(this).attr('name', 'tmp_' + tempField);
            $(this).parent().append('<input name="' + tempField + '" id="' + tempField + '" type="hidden" value="" />');

        });       

        $(this).bind("keydown", function (event) {
            // Allow: backspace, delete
            if (event.keyCode == 46 || event.keyCode == 8) 
            {
                var tempField = $(this).attr('name');
                var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
                $('#' + hiddenID).val('');
                $(this).val('')
                return;
            }  // Allow: tab, escape, and enter
            else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
            // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
            // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else 
            {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) 
                {
                    event.preventDefault();
                }
            }
        });

        $(this).bind("keypress", function (evt) {
            clearTimeout(active);
            var hiddenssn = '';

            if ($(this).val().length > 0) {
                currentValue = $(this).val().slice($(this).val().length - 1);

                for (i = 0; i <= $(this).val().length - 1; ++i) {
                    if (i != 4 || i != 7) {
                        hiddenssn = hiddenssn + unescape(opts.charReplace);
                    }
                }

                if ($(this).val().length == 6) {
                    hiddenssn = hiddenssn + '-';
                }

                if ($(this).val().length == 3) {
                    hiddenssn = hiddenssn + '-';
                }
                lastLetter = $(this).val().charAt($(this).val().length - 1);
                if (lastLetter != unescape(opts.charReplace)) {
                    saveString(lastLetter, this);
                }
                $(this).val(hiddenssn);
                active = setTimeout("hideAll('" + $(this).attr('name') + "')", opts.charDuration);

            }
            else {
                currentValue = $(this).val();
                var tempField = $(this).attr('name');
                var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
                $('#' + hiddenID).val('');
            }
        });

        hideAll = function (el) {
            lastLetter = $('input[name=' + el + ']').val().charAt($('input[name=' + el + ']').val().length - 1);
            var hiddenID = el.substr(el.indexOf('_') + 1);
            var tmpstr = $('#' + hiddenID).val();
            if (tmpstr.length < 9) {
                $('#' + hiddenID).val(tmpstr + lastLetter);
            }
            var hiddenssn = '';

            for (i = 0; i <= $('input[name=' + el + ']').val().length - 1; ++i) {
                if (i == 3 || i == 6) {
                    hiddenssn = hiddenssn + '-';
                }
                else {
                    hiddenssn = hiddenssn + unescape(opts.charReplace);
                }
            }

            $('input[name=' + el + ']').val(hiddenssn);
        }

        saveString = function (str, el) {
            var tempField = $(el).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            var tmpstr = $('#' + hiddenID).val();
            var length = $('#' + hiddenID).val().length;
            $('#' + hiddenID).val(tmpstr + str);
        }

        //use this function if needed in future on character by character delete
        deleteLast = function (el) {
            var tempField = $(el).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            var tmpstr = $('#' + hiddenID).val();
            var length = $('#' + hiddenID).val().length;
            $('#' + hiddenID).val(tmpstr.substring(0, length - 1));
        }
    };

})(jQuery);



How to Use It

your input textbox
 <div class="row">
                <div class="span3 offset4">
                    @Html.TextBoxFor(model => model.Ssn, new { @Id = "ssn", @class = "ssnclass", maxlength = 11})
                </div>
            </div>

your document ready function
  $(document).ready(function () {                         
        $('.ssnclass').maskssn({ charReplace: '*', charDuration: 1500 });
});

You can create text file of this and add to your scripts folder
and Refer in your <script type="text/javascript"> or using MVC Bundles