HTML5 占位符在焦点上消失

是否有免费的 jQuery 插件可以改变 placeholder 的行为以匹配 HTML5 规范?

聚焦前

专注于良好(Safari)

专注不好(Chrome、Firefox)

您可以通过这个简单的小提琴 写了一个很好的 jQuery 插件，就是这样做的.
它比 Robert 的更稳定，并且在聚焦区域时会逐渐变为浅灰色.

• 查看演示页面
• 在 GitHub
上获取它
• 玩小提琴

<小时>

我修改了他的插件以读取 placeholder 属性，而不是手动创建 span.
这个小提琴有完整的代码:

HTML

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

JS

//Stefano J. Attardi 的原始代码，MIT 许可证(函数($){功能切换标签(){var 输入 = $(this);if (!input.parent().hasClass('placeholder')) {var label = $('<label>').addClass('placeholder');input.wrap(标签);var span = $('<span>');span.text(input.attr('占位符'))input.removeAttr('占位符');span.insertBefore(输入);}设置超时(函数(){var def = input.attr('title');if (!input.val() || (input.val() == def)) {input.prev('span').css('visibility', '');如果(定义){var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');input.prev('span').css('margin-left', dummy.width() + 3 + 'px');dummy.remove();}} 别的 {input.prev('span').css('visibility', 'hidden');}}, 0);};函数重置字段(){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);//IE 重置图标需要 [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');});$(函数(){$('input[placeholder], textarea[placeholder]').each(函数() { toggleLabel.call(这个)；});});})(jQuery);

CSS

.placeholder {背景:白色；向左飘浮;明确:两者；}.占位符跨度{位置:绝对；填充:5px；左边距:3px；颜色:#999；}.placeholder 输入，.placeholder textarea {位置:相对；边距:0；边框宽度:1px；填充:6px；背景:透明；字体:继承；}/* 删除 Safari 的额外填充.如果您不关心像素完美，请删除.*/@media 屏幕和 (-webkit-min-device-pixel-ratio:0) {.placeholder 输入，.placeholder textarea { padding: 4px;}}

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

Before Focus

On Focus Good (Safari)

On Focus Bad (Chrome, Firefox)

You can what your browser does with this simple fiddle.

HTML5 draft spec says:

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).

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.

解决方案

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

• See the demo page
• Grab it on GitHub
• Play with the fiddle

---

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

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; }
}