Question

Hopefully I haven’t scared away too many people with that title :-$

Using Javascript or jQuery, how can we make a form text input:

1. Show a default value/placeholder text
2. When hovered, replace the default value/placeholder text with different text
3. When clicked, fade away the different text slightly
4. And finally, when the user begins typing, remove default/placeholder text entirely

Here are the meat and bones of this question in images:

This step simply places a nice default text or placeholder in the text input box. Easy peasy.

Now, the user is hovering the input box. We’d like to give them a suggestion of what they could search for. A nice fade effect from the text in Action #1 to this text would be phenomenal.

Here we’ve faded away the suggestion text, encouraging the user to type their own search terms.

Finally, the user begins typing and the suggestion text is removed altogether.

Answer 1

It’s just basic HTML, jQuery and CSS.

HTML:

<input type="text" placeholder="Search..." data-placeholder-hover="Search for stuff!" />​

JavaScript:

$('input[data-placeholder-hover]').on('mouseenter mouseleave', function() {
    var $this = $(this);

    $this.toggleClass('hovered');

    var temp = $this.prop('placeholder');

    $this.prop('placeholder', $this.data('placeholder-hover'))
    $this.data('placeholder-hover', temp);
});​

CSS:

input.hovered::-webkit-input-placeholder {
    color: red;
}

input.hovered:-moz-placeholder {
    color: red;
}

input.hovered:-ms-input-placeholder {
    color: red;
}​

Demo: http://jsfiddle.net/b94mb/

You can style the textbox even more with :focus and other pseudo-selectors: http://jsfiddle.net/b94mb/4/