Take the 2-minute tour ×

Is there a freely available jQuery plugin that changes placeholder behavior to match HTML5 spec?

Before Focus
chrome unfocused placeholder

On Focus Good (Safari)
safari focused placeholder

On Focus Bad (Chrome, Firefox)
chrome focused placeholder

You can what your browser does with this simple fiddle.

HTML5 draft spec says:


The "/or" is new in current draft so I suppose that's why Chrome and Firefox don't support it yet. See WebKit bug #73629, Chromium bug #103025.

share|improve this question
Your fiddle works for me (placeholder doesn't disappear on focus) on Chrome 17.0.963.12. –  ThinkingStiff Dec 26 '11 at 2:19
@antisanity I'm on the dev channel: dev.chromium.org/getting-involved/dev-channel –  ThinkingStiff Dec 30 '11 at 20:01
I have recently updated my Placeholders.js polyfill to support this. Works in pretty much all browsers, including IE6, and has no dependency on jQuery. –  James Allardice Jul 26 '12 at 10:48
Surely "e.g. by displaying it inside a blank unfocused control and hiding it otherwise" means that this behaviour is allowed by the spec. I'd also suggest that having the placeholder text hidden on focus is far more usable for most people (I've watched several people try to select the placeholder text to delete it before typing). –  pelms Nov 28 '13 at 15:56
Why not trust that the browser is doing the right job? The browser knows what's best way better than the developer (each browser can be configured to the user's likings). –  brunoais May 2 at 10:39

5 Answers 5

up vote 13 down vote accepted

Stefano labels

Stefano J. Attardi wrote a nice jQuery plugin that does just that.
It is more stable than Robert's and also fades to a lighter gray when the field gets focus.

I modified his plugin to read placeholder attribute, as opposed to manually creating a span.
This fiddle has complete code:


<input type="text" placeholder="Hello, world!">


// Original code by Stefano J. Attardi, MIT license

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');

            var span = $('<span>');

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
            } else {
                input.prev('span').css('visibility', 'hidden');
        }, 0);

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).prev('span').css('visibility', '');

    var fields = $('input, textarea');

    fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#ccc');
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#999');

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }



.placeholder {
  background: white;
  float: left;
  clear: both;
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
    .placeholder input, .placeholder textarea { padding: 4px; }
share|improve this answer
Seems decent, but the github repo wasn't updated in two years ... I'm reluctant to use stale code. –  ripper234 May 6 '12 at 10:56
@ripper: Could this possibly mean that the code just works? I suggest you try to use it, and if you find any problems, feel free to fork it and fix them. But if you find a better solution, please let us know. –  Dan Abramov May 6 '12 at 11:01
It could mean that ... it's just not very confidence-inspiring ... but I guess I'll give it a spin. –  ripper234 May 6 '12 at 12:41
@ripper: It worked for me fairly well, except for some font size issues I can't recall exactly. –  Dan Abramov May 6 '12 at 13:00
you also need fields.live('mouseup', toggleLabel); to show the placeholder when user clicks on the reset ([X]) icon in IE –  xorcus Jan 27 at 16:02

Robert Nyman discusses the problem and documents his approach in his blog.
This fiddle that has all the neccessary HTML, CSS and JS.

enter image description here

Unfortunately, he solves the problem by changing value.
This will not work by definition if placeholder text is itself a valid input.

share|improve this answer

I found this question by googling out the solution to the same problem. It seems that existing plugins either don't work in elder browsers or hide placeholder on focus.

So I decided to roll on my own solution while trying to combine best parts from existing plugins.

You may check it out here https://github.com/w0rm/jquery.placeholder and open an issue if you face any problems.

share|improve this answer

How about something simple like this? On focus save out the placeholder attribute value and remove the attribute entirely; on blur, put the attribute back:

$('input[type="text"]').focus( function(){
$('input[type="text"]').blur( function(){
share|improve this answer

Maybe you can try with Float Label Pattern :)

See here http://css-tricks.com/float-labels-css/

share|improve this answer

Your Answer


