jQuery .attr() not working in IE

Question

I am working with some simple jQuery to add onfocus/onblur events to a generated form. The following code works in other browsers, except IE7/8:

$(document).ready(function(){
   $("input#edit-submitted-first-name").attr('onfocus', "if(this.value=='First Name') this.value = ''");
   $("input#edit-submitted-first-name").attr('onblur', "if(this.value=='') this.value = 'First Name'");
});

In IE source, its not even adding it to the inputs. Is there an IE bug about this?

Answer 1

I don't think events are supposed to be assigned this way.

Why not use

$("input#edit-submitted-first-name").focus(function(){ if (this.....
$("input#edit-submitted-first-name").blur(function(){ if (this.....

?

Answer 2

try this

$('input#edit-submitted-first-name').focus(function() {

    if($(this).val()=='First Name') 
              $(this).val('')

    });

    $('input#edit-submitted-first-name').blur(function() {

    if($(this).val()=='') 
              $(this).val('First Name')

    });

Answer 3

On IE8 in compatibility mode this is working:

$(document).ready(function(){ 
    $("#edit-submitted-first-name").focus(function(){ 
        if(this.value=='First Name') this.value = '';
    }); 
    $("#edit-submitted-first-name").blur(function(){ 
        if (this.value=='') this.value = 'First Name';
    }); 
});

See it in action here: http://jsfiddle.net/w9pWk/

NOTE: This functionality is VERY similar to the watermark plug-in found here: http://code.google.com/p/jquery-watermark/ but of course, missing some of the functionality that provides in ease of use, initial field population, logic to NOT replace if data is entered etc. you get with the plug-in.