Form input onfocus problem

I want to use jQuery Masked Input Plugin (http://digitalbush.com/projects/masked-input-plugin/) in my registration form. My form looks like that

...

<input  class="part1" type="text" name="lname"  value="Last Name" onfocus="if(this.value=='Last name') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Last name'}"  />
<input class="part2" type="text" id="dob" name="dob"  value="Date of Birth" onfocus="if(this.value=='Date of Birth') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Date of Birth'}" />

...

a the end of the file

<script src="core/code/js/mask.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('#dob').mask('99.99.9999', {placeholder:' '});
});
</script>

When you open the page, Last Name field shows word "Last name" but date of birth doesn't show anything. http://prntscr.com/2miaa How can i activate mask plugin for only onfocus event?

Solution

Yarr... Ok, first don't put so much script inside your markup. It's difficult to read, and it's going to be even more difficult to maintain. Lets try separating the style and functionality of your form first.

Edit: A working example of this can be found at http://jsfiddle.net/ninjascript/RuFHK/2/

CSS

input { color: #aea592; }
input.default { font-style: italic; }

HTML

<input class="part1 default" type="text" name="lname" value="Last Name"/>
<input class="part2 default" type="text" id="dob" name="dob" value="Date of Birth"/>

JavaScript

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
});

phew... OK that's a bit easier to understand. Now you want just one more thing to happen on focus, and that's to apply a mask to the value contained in the #dob element. Here's the edited block:

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

Now your input should only be masked after it gains focus.

If you want to make sure that some value is returned on submit, you can always validate the content on 'blur'. I don't really feel like writing if statements for every field in this form, so I'm just going to map each field name and it's default value and refer to that:

var defaultValues = {
    'lname': 'Last Name',
    'dob': 'Date of Birth'
};

Now I can just refer to that map whenever I need to repopulate the field with my default values. In the case of the DOB field, it looks like the input mask plugin also has an 'unmask' option. Unfortunately because the characters within the mask are part of the #dob field's value, we can't just check for an empty value. Instead I'm going to use a regular expression that checks for a value that consists of nothing but whitespace and '.' chars:

$('input').bind('blur', function() {
    var el = $(this);
    var name = el.attr('name');

    // Really we only want to do anything if the field is *empty*
    if (el.val().match(/^[\s\.]*$/)) {

        // To get our default style back, we'll re-add the classname
        el.addClass('default');

        // Unmask the 'dob' field
        if (name === 'dob') {
            el.unmask();
        }

        // And finally repopulate the field with its default value
        el.val(defaultValues[name]);
    }
});