有没有免费提供的jQuery插件，改变占位符行为以匹配HTML5规范？
焦点前
焦点好(Safari)
焦点错误(Chrome，Firefox)
你可以用浏览器做什么with this simple fiddle。
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).
“/或”是当前草案的新的，所以我想这就是为什么Chrome和Firefox不支持它。参见WebKit bug #73629,Chromium bug #103025。
解决方法
Stefano J. Attardi写了一个不错的jQuery插件，只是这样。
它比罗伯特的更稳定，并且当场得到焦点时，还会变淡到更浅的灰色。
它比罗伯特的更稳定，并且当场得到焦点时，还会变淡到更浅的灰色。
>见the demo page
>抓住它GitHub
>使用the fiddle
我修改他的插件读取占位符属性，而不是手动创建跨度。
This fiddle具有完整代码：
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','#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; }
}
