/* ---------------------------------------------------------------------------------------------
* myPass v1.0 - jQuery password-hiding iPhone-Style
*
*
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