Marko Anastasov wrote this on February 28, 2011

jQuery plugin to reuse input placeholders on older browsers

Here’s something tiny and new on our GitHub: jquery-placeholders. It is a “jQuery plugin for input hints which uses your placeholder HTML5 attributes, so you can write markup for modern browsers first and degrade gracefully”.

For example, given you have this markup:

<input type="text" name="name" value="" id="name" placeholder="Your name">
<input type="text" name="email" value="" id="email" placeholder="Email">

When you add this piece of JavaScript:

$("#someForm").placeholders(["#name", "#email"]);

Then the plugin will do all the magic about putting the placeholder text in input fields, hiding it on focus, putting it back when the input is cleared, and preventing it from being submitted as input value. There’s a demo page that shows it all.

Enjoy!

comments powered by Disqus

About Marko Anastasov

Marko co-founded Rendered Text. He’s a programmer with a passion of creating something for other people, coupled with interests in how things work in the society and nature. He is having a great time working across many areas in the company, including product design, helping the engineering teams, empowering users and marketing. He likes to counterbalance it all with running, cycling or a day in the woods.

Suggested Reads

Inject is a fundamental building block

Inject is one of the fundamental, and most versatile constructs available in functional languages. It can be used to implement map, select, max, all? and a bunch of other iteration related methods. Unfortunately, many programmers are not aware of its awesome powers. This article is here to improve this fact.

Contact

Rendered Text is a software company. For questions regarding Semaphore, please visit semaphoreci.com. Otherwise, feel free to get in touch any time by sending us an email.

Rendered Text
Svetozara Miletica 10
21000 Novi Sad
Serbia