Changing Placeholder Text On Focus

Question

Is there a simple solution for changing placeholder text when an input is in focus? For example:

<input type="text" placeholder="Join our mailing list!">

would become this:

<input type="text" placeholder="enter your email address...">

while the input is active.

Answer 1

$('input').focus(function() {
    $(this).attr('placeholder', 'enter your email address...')
}).blur(function() {
    $(this).attr('placeholder', 'Join our mailing list!')
})

http://jsfiddle.net/ByLGs/

• attr
• focus
• blur

Answer 2

You have this tagged "jQuery" so I assume you're open to using it. Here's a simple way:

<input type="text" placeholder="Join our mailing list!" title="enter your email address...">​

$('input').on('focus', function(){
    $(this).data('placeholder', $(this).attr('placeholder')); // Store for blur
    $(this).attr('placeholder', $(this).attr('title'));
}).on('blur', function(){
    $(this).attr('placeholder', $(this).data('placeholder'));
});​

Demo: http://jsfiddle.net/m6j8m/

This could be shortened up, but you get the idea. This way you don't have to keep track of attribute values in your javascript, it's all in the HTML so it's a one-size-fits-all solution. If using title doesn't suit your needs, you can use data- attributes instead or some other attribute.