Masking a social security number input
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/
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.
$(".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/
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)">