Change digits for SSN with jquery

Question

I found this script to hide digits for the SSN. I would like to accomplish what the blur/focus events do by toggling a button too (and for the text on the button to change as well). I attempted to do this with a Click event, but need help. Can someone please take a look at the fiddle.

I would also like for the HIDDEN state to show the last 4 digits of the SSN and the VISIBLE state shows all digits.

HTML
<form>
<input name="ssn" id="ssn" type="text">
<button id="submit">Show SSN</button>

jQuery          
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($this.val().replace(/^\d{5}/, '*****'));
};

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

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

$("#submit").click(function () {
    // check the visibility of the next element in the DOM
    if ($(this).text("Hide SSN")) {
        $('#ssn').val(retrieveValue);
        } else {
       $('#ssn').val(hideValue);
       $('#submit').text("Show SSN");
    }
});

Click [here] (http://jsfiddle.net/squirc77/wEwYz/)

Answer 1

one input that only accepts numbers

var ssn = $('#ssn'), sub = $('#submit'), stored = ssn.val(), go;
//only if stored has value and button says show, store ssn and toggle
function vshow() {if (stored && go) { ssn.val(stored); cblur(); }};
function vhide() {
    if (!go) {//only if button says hide
        stored = ssn.val();//set stored
        if(stored) {//if stored has value
            if (stored.length>4) {//check length
                ssn.val(Array(stored.length-3).join('*')+stored.slice(-4));
                cblur();//toggle
            }
        }
    }
};
function cblur() {
    sub.text(sub.text()=='Show SSN'?'Hide SSN':'Show SSN');//toggle
    if (sub.text()=='Show SSN') { go=true; }//show
    else if (sub.text()=='Hide SSN') { go=false; }//hide
}
ssn.blur(function() { vhide(); })//on blur
.focus(function() { vshow(); })//on focus
.keyup(function() {
    if (ssn.val().match(new RegExp('[^0-9]','g'))) {//if non-digit present
        ssn.val(ssn.val().replace(/[^\d]+/g,''));//remove non-digit
    }
});
sub.on('click', function () {
    if (go) { vshow(); }//show
    else { vhide(); }//hide
    return false;//prevents default behavior / remove to get it back
});

made a fiddle: http://jsfiddle.net/filever10/G36E3/

EDIT: added error reporting/validation to fiddle

Answer 2

There is a much easier way of achieving this and it involves toggling the <input> from text to password

JSFidlle 3 text fields

HTML

<input type="text" name="ssn1" id="ssn1" size="2" maxlength="3" style="text-align:center;" value="555">
&nbsp;
<input type="text" name="ssn2" id="ssn2" size="2" maxlength="2" style="text-align:center;" value="55">
&nbsp;
<input type="text" name="ssn3" id="ssn3" size="2" maxlength="4" style="text-align:center;" value="5555">
&nbsp;
<input type="button" id="ssn_button" value="Show/Hide SSN">

JS

$(document).ready(function(){
    // Page has loaded, hide SSN1 and SSN2
    $('#ssn1, #ssn2').attr({'type':'password'});

    // Listen for Focus on any three fields
    $('#ssn1, #ssn2, #ssn3').on('focus', function(){
        $('#ssn1, #ssn2').attr({'type':'text'});
    });

    // Listen for Blur on any three fields
    $('#ssn1, #ssn2, #ssn3').on('blur', function(){
        $('#ssn1, #ssn2').attr({'type':'password'});
    });

    // Show/Hide SSN click
    $('#ssn_button').on('click', function(){
        // Alternate SSN1 and SSN2 based on current SSN1 state
        if($('#ssn1').attr('type') == 'password'){
            $('#ssn1').attr({'type':'text'});
            $('#ssn2').attr({'type':'text'});
        }
        else{
            $('#ssn1').attr({'type':'password'});
            $('#ssn2').attr({'type':'password'});
        }
    });
});

Just for you OP :)

JSFiddle 1 text field

Answer 3

Use Css -webkit-filter: blur. It makes much easier to accomplish with real blur effect.

jsfiddle

HTML:

<form>
    <input name="ssn" id="ssn" type="text" class="show"/>
    <button id="submit">Hide SSN</button>
</form>

CSS:

.blur{
    -webkit-filter: blur(2px);
    opacity: 0.5;
}

JS:

$('#submit').click(function(event){
    event.preventDefault();
    $("#ssn").toggleClass(function(){
        if($(this).attr('class')=='blur'){
            $('#submit').text("Hide SSN");
            return 'show';
        }else{
            $('#submit').text("Show SSN");
            return 'blur';
        }
    });
});