I have a date of birth text field:

<input type="text" id="dob" name="dob" placeholder="Date of Birth" />

I'm using a jQuery plugin (Charl van Niekerk's Placeholder text) to make sure that older browsers see the placeholder text. All good so far.

When my date of birth field is clicked on, I want to switch from the placeholder text to an input mask. For that I'm using another plugin (/).

However I only want to activate the input mask onfocus, and remove it onblur, otherwise it stops the placeholder text from being shown.

I need something like:

$(document).ready(function() {    
    $('#dob').focus(function() {  
        $.mask.definitions['~']='[+-]';
        $('#dob').mask('99/99/9999');  
    });
    $('#dob').blur(function() {
        // Something here to unmask?   
    });  
});

This code doesn't work at the moment. Any ideas?

I have a date of birth text field:

<input type="text" id="dob" name="dob" placeholder="Date of Birth" />

I'm using a jQuery plugin (Charl van Niekerk's Placeholder text) to make sure that older browsers see the placeholder text. All good so far.

When my date of birth field is clicked on, I want to switch from the placeholder text to an input mask. For that I'm using another plugin (http://digitalbush./projects/masked-input-plugin/).

However I only want to activate the input mask onfocus, and remove it onblur, otherwise it stops the placeholder text from being shown.

I need something like:

$(document).ready(function() {    
    $('#dob').focus(function() {  
        $.mask.definitions['~']='[+-]';
        $('#dob').mask('99/99/9999');  
    });
    $('#dob').blur(function() {
        // Something here to unmask?   
    });  
});

This code doesn't work at the moment. Any ideas?

• javascript
• jquery

1 Answer 1

Reading the plugin code, it should be possible to do this (untested):

(function($) {
  $(document).ready(function() {
    $('#dob').focus(function() {
      $.mask.definitions['~']='[+-]';
      $(this).mask('99/99/9999');
    }).blur(function() {
      $(this).unmask();
    });
  });
})(jQuery);

Note that I added (function($){})(jQuery) - I believe it is good practice to wrap all your code this way.