CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Razor Storm
Razor Storm

Reputation: 12336

How do I make faint words in search bar that go away when you click/type?

So, for instance facebook's search bar has faint word that says "search", but when you click on the bar, it becomes blank and you may begin typing, when you click away the "search" goes back.

Similarly, SO's ask a question title box has faint words that go away when you start typing.

I'm not too sure what this effect is called, but I'm wondering if theres a jQuery plugin that helps to achieve this. This isn't particularly difficult to program, but I thought why reinvent the wheel if someone already made a plugin for it.

Upvotes: 5

Views: 992

Answers (2)

alex
alex

Reputation: 490453

I made a jQuery plugin that does just that!

Update

I've since moved it to GitHub and rewrote it to address some issues. Enjoy! Feel free to email me where you use it, so I can feel useful :)

Upvotes: 9

RobL
RobL

Reputation: 187

HTML5 has a feature called "placeholder" that achieves this. For example:

<input name="search" placeholder="Search" />

Of course, HTML5 isn't supported by all browsers, so javascript would do the trick elsewhere.

Upvotes: 5

Related Questions