HTML5 占位符在焦点上消失

有没有免费的 jQuery 插件可以改变placeholder行为是否符合 HTML5 规范？

Before Focus

On Focus Good (Safari)

On Focus Bad (Chrome, Firefox)

您可以执行浏览器的操作用这个简单的小提琴 http://jsfiddle.net/XqaUw/.

HTML5 草案规范说 http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute:

当元素的值为空字符串时，用户代理应在删除换行符后向用户显示此提示and/or该控件未聚焦（例如，通过将其显示在空白的未聚焦控件内并以其他方式隐藏它）。

“/or”在当前草案中是新的，所以我想这就是 Chrome 和 Firefox 还不支持它的原因。看WebKit 错误 #73629 https://bugs.webkit.org/show_bug.cgi?id=73629, 铬错误 #103025 http://code.google.com/p/chromium/issues/detail?id=103025.

斯特凡诺·J·阿塔迪 http://attardi.org/写了一个很好的 jQuery 插件来做到这一点。
它比罗伯特的更稳定，并且当视野聚焦时也会褪成浅灰色。

• See 演示页面 http://attardi.org/labels2/
• 抓住它GitHub https://github.com/steadicat/labels
• 玩小提琴 http://jsfiddle.net/fSypb/2/

我修改了他的插件来阅读placeholder属性而不是手动创建span.
这把小提琴 http://jsfiddle.net/fSypb/6/有完整代码：

HTML

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

JS

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

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

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

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        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');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(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); }
       );
    });

})(jQuery);

CSS

.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. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}