Question

notice how the placeholder works on the Stackoverflow ask a question title and on Twitter’s Sign Up form: https://twitter.com/signup

The placeholder has two states:

1. No selected (placeholder shown)
2. Selected, but 0 input (placeholder shown, lighter color)

Does anyone know of a jQuery plugin that supports this? I’ve seen jQuery placeholder plugins that support #1, but not #2.

Thanks

Answer 1

Here is a quick and easy example to get you started.

HTML

<input type='text' id='in' value='Enter Something...'>

JavaScript

$('#in').bind({
    click : function() {
        $(this).css('color','#ccc');
    },
    focusout : function() {
        $(this).css('color','#000');
    },
    keydown : function() {
        $(this).val('');
        $(this).css('color','#000');
        $(this).unbind('keydown');
        $(this).unbind('click');
    },
});

Good luck

EDIT: I increased the functionality and packaged it as a plugin, you can get it at Github, the jQuery Plugin Site or from the Project Home (Demo & Documentation Available)