Replaceholder jQuery Plugin

In two recent posts I used a simple JavaScript function to replace the placeholder attribute of an input element with a value attribute.  Since I’ve used it twice now I decided to make it into a simple jQuery plugin and wanted to give it to everyone else as well. The best part is you can now start using this HTML5 attribute before it’s fully supported!

Demo | Download

What does it do?

Replaceholder simply scans your file for input elements with the placeholder attribute and replaces it with a value attribute for cross-browser feng shui. It mimics the basic placeholder functionality by saving the placeholder value of each field and on focus removes the value from the input. As the user interacts with the field it removes and replaces the value of the field unless the user has added content. From this:

<input type="text" class="search" placeholder="Search" />

To this:

<input type="text" class="search" value="Search" />

How it works

  1. Download the plugin
  2. Unzip the file and grab either the development version (jquery.replaceholder.js) or the production version (jquery.replaceholder-min.js)
  3. Add the <script> tag
    <script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>
  4. Run plugin
    $.fn.replaceholder();
  5. ???
  6. Profit!

That’s all you need to do.

Copypasta?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>
<script type="text/javascript">
$(function() {
	$.fn.replaceholder();
});
</script>

Using the above code you should only have to update “path/to/file/” with the location to your saved file!

Customizing the Plugin

You can change the focus text color and the blur text color by passing these two properties:

$.fn.replaceholder({
	focusColor:'#000',
	blurColor:'#aaa'
});

You can also specify the elements you want to apply replaceholder to:

$('.search').replaceholder();

Feel free to use and abuse this code. If you end up using it let me know! Enjoy!

11 thoughts on “Replaceholder jQuery Plugin

  1. Pingback: Use HTML5 placeholder text in all browsers « James Scariati

  2. Bug: If placeholder value is typed inside its (input) form, it disappears when un-focusing and focusing again.
    Reproduce:
    Type in a form its placeholder attribute value after, off course, $.fn.replaceholder() has been run.
    Unfocus element by clicking the html body.
    Focus element again. It disappears.

    I don’t know what W3 specs say about how it, but I don’t think it should disappear or change its color like it’s still a label (ex: see how webkit acts on the placeholder).
    I am a mootools guy, so http://davidwalsh.name/sliding-labels-mootools fits me well :)

    Nice jQuery plugin though, I’m sure that many folks will use it!

  3. Ok, I’m not over familiar with the HTML5 attributes, but I’m not sure, even after googling it now, what the hell placeholder is supposed to do that value does not. Why not just use value to begin with?

    • Value is a static string of text. Placeholder is text that is displayed in the field, however, when the user focuses on the field the placeholder text is removed. Value will stay in the field when focused.

    • Ok….I’m dumb. From what I understand, if you use value, and they submit without typing anything in the input, that value is submitted. So placeholder is there unless they DO type something into the input, at which point it is switched to value.

  4. I’ve found that with this implementation, if you submit a form without typing anything in the input fields then the placeholder text is submitted as the value. It seems the easiest solution would be to take inspiration from David Walsh’s solution and overlay a label on top of the input field.

  5. Thanks for the lightweight ‘placeholder’ plugin. I did add ‘textarea[placeholder]’ to the selection in order to add support for textareas. Just a simple addition.

  6. Pingback: Replaceholder con un plugin jQuery! | sastgroup.com

  7. Pingback: Replaceholder con un plugin jquery!

  8. (this.length > 0) ? $this = $(this) : $this = $(‘input[placeholder]’);

    drop the > 0, just use (this.length). 1 = true 0 = false.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>