Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Jquery - Show And Hide Last 4 Numbers Of A Phone Number

Post a Comment
How can I show and hide the last 4 numbers of a phone number by replacing it with something like 949XXXX and when you click on it show the rest of the numbers? I just want to do th

Solution 1: 

<divid="number"data-last="1234">949<span>XXXX</span></div>
$('#number').click(function() {
    $(this).find('span').text( $(this).data('last') );
});

Example:http://jsfiddle.net/4fzaG/

If you want to toggle with each click, do this:

$('#number').toggle(function() {
    $(this).find('span').text( $(this).data('last') );
},function() {
    $(this).find('span').text( 'XXXX' );
});

Example:http://jsfiddle.net/4fzaG/1/

Or if you don't want to use custom attributes, do this:

<divid="number">949<span>XXXX</span><spanstyle="display:none;">1234</span></div>
$('#number').click(function() {
    $(this).find('span').toggle();
});

Example:http://jsfiddle.net/4fzaG/3/

EDIT:

For the sake of graceful degradation, you may want to have the default view show the number, and only obfuscate it if JavaScript is enabled.

<divid="number"data-last="1234">949<span>1234</span></div>
$('#number').toggle(function() {
    $(this).find('span').text( 'XXXX' );
},function() {
    $(this).find('span').text( $(this).data('last') );
})
  .click();

Example:http://jsfiddle.net/4fzaG/4/

Solution 2:

Yes, you can do it like that (see jsfiddle as a proof):

jQuery('body').delegate('span[data-replace]', 'click', function(event){
    event.preventDefault();
    var older_value = jQuery(this).html();
    jQuery(this)
        .html(jQuery(this)
        .attr('data-replace'))
        .attr('data-replace',older_value);
});

where phone numbers should be coded like that:

<spandata-replace="555-41-23">555-XX-XX</span>

This will show/hide last letters with each click. It binds events to the <body> (you can change it into some container with the phone numbers) and delegates them to the proper elements on the page, so using AJAX will not be an issue (you will not need to re-attach events).

Solution 3:

Very Quick Answer : More phone numbers bug :)

Telefon : 0 216 457 <spanonclick="this.innerHTML='49 47'">XX XX</span>

Solution 4: 

<divclass="overh brkword lheight18 pdingtop5 pdingleft8"><spanclass="small">Telefon</span><strongclass="">07XX XXX XXX</strong><ahref="javaScript:void(0);"rel="phone"class="{clickerID:'phone_details','path':'phone', 'id':'WlCT', 'id_raw': '13667831' } atClickTracking link spoiler small link-phone nowrap"><span>Arata numarul de telefon</span></a></div>

Post a Comment for "Jquery - Show And Hide Last 4 Numbers Of A Phone Number"