JQuery focus/blur events help

Question

$(document).ready(function() {

    $('#username').focus(function() {
        $(this).val('');
    })
    $('#username').blur(function() {
        var l = $(this).val.length;
        if (l == 0) {
            $(this).val('Username');
        }
    })

});

What the above code is supposed to do is empty the value of #username input field when focused and fill in the user friendly "Username" there when it loses focus in case it's still empty.

The second part doesn't work though (I think there is some problem with the if condition I'm using?).

Answer 1

Use $(this).val().length instead. $(this).val only references the function. And the length attribute of a function is the number of expected arguments and not the length of the return value of that function.

Answer 2

For the second line of your blur function try

var l = $(this).val().length;

Also, try alerting this value to see if it is finding it okay.