jQuery - Show and hide last 4 numbers of a phone number

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 this with jQuery/JavaScript.

Answers


<div id="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:

<div id="number">949<span>XXXX</span><span style="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.

<div id="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/


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:

<span data-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).


Very Quick Answer : More phone numbers bug :)

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

<div class="overh brkword lheight18 pdingtop5 pdingleft8">
    <span class="small">Telefon</span>
    <strong class="">07XX XXX XXX</strong>
    <a href="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>

Need Your Help

Running program from the command line via PHP - Passing commands instead of restarting the program every time

c# php command-line cmd

I'm using a local server on my laptop to control a C# program via PHP. Basically I'm taking a POST passed to my web server, and using it as the parameters for a command line program. My code is

how can I remove SVN bindings from folder using GUI SVN tool

visual-studio svn visual-studio-2010 tortoisesvn

I have SVN bound folder that is copied from my colleague's machine. that folder contains svn bound hidden folders which are difficult to remove manualy. Is there a way to remove the svn bindings from