How to Hide all but Last 4 Digits of Social Security #

Here's a work in progress. If you have a social security # field on your form, but only want the last four digits to be displayed (for a modicum of security, or at least the feeling of security), it's real simple, I swear.

Find the field key for your social security # text field, and then the form key. Then just paste this bit of jquery in your header, footer, or in a .js file called from your header.

<script>
jQuery(function( $ ) {
var retrieveValue = function(ev){
var $this = $(this),
val = $this.data('value');

if (val) {
$this.val(val);
}
},
hideValue = function(ev){
var $this = $(this);

$this.data('value', $this.val());
$this.val(function(idx, val){
var mask = val.match(/^(.*?)(d{4})$/);

return (mask[1] ? mask[1].replace(/d/g, '*') : '') + (mask[2] ? mask[2] : '')
});
};

$('#field_a7afui').focus(retrieveValue);

$('#field_a7afui').blur(hideValue);

$('#form_hv3hcs').submit(function(ev){
ev.preventDefault();
retrieveValue.call($('#field_a7afui')[0], ev);
alert($('#field_a7afui').val());
hideValue.call($('#field_a7afui')[0], ev);
});
} )();
</script>

Alls you gots to do is change '#field_a7afui' to your field key (make sure you leave the hashtag). This field key occurs 5 times in the code, so change it each time.

Then just change '#form_hv3hcs' to your form key, and leave the hashtag in.

Paste that in your header or whatever, save, reload, then you've got a Social Security # field that shows the fully number on focus, and hides all but the last 4 digits on blur. When the form is submitted, it submits the full number to the database.

Also I should mention that this allows numbers, dashes, spaces, slashes, and periods, but not letters. So the user could enter their social numerous ways, 111-11-1111; 111.11.1111; 111 11 1111; 111/11/1111; or 111111111. They all work with this script.

So now I'm trying to find a way to adapt this script to make it only show the last four digits immediately, like on page load, for the purpose of having a soc. sec. # field in another form which autopopulates the user's social security number from the previous form, but only displays the last four digits, from page load on (even just a read only field).

Also, I'm trying to find a way to do the format mask Steph&co. provide coupled with this script. Here's the format mask:

add_action('frm_field_input_html', 'add_input_html');

function add_input_html($field){

if($field['id'] == 379){ //change 25 to the ID of your field

global $frm_input_masks;

$frm_input_masks[$field['id']] = "999-99-9999";

}

But if I use this with the hide-all-but-last-four script above, it empties the field when the user is finished inputting. Obviously they don't play well together.

So, any helpers out there?

Otherwise, here's a simple way to hide all but last four in a soc. sec. field. See screenshot. Enjoy.