Internet Explorer的输入占位符
HTML5引入了input元素的placeholder属性，它允许显示灰色的默认文本。
可悲的是IE浏览器，包括IE 9不支持它。
已经有一些占位符模拟器脚本了。 他们通常通过将默认文本放入输入字段中，给它一个灰色，并在您关注输入字段后立即将其删除。
这种方法的缺点是占位符文本位于输入字段中。 从而：
我想有一个解决方案，占位符文本不在输入本身。
在查看HTML5 Cross Browser Polyfills的“Web Forms：input placeholder”部分时，我看到的是jQuery-html5-placeholder。
我试着用IE9进行演示，它看起来像是用一个span来包装你的<input> ，并用占位符文本覆盖一个标签。
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>
那里还有其他的垫片，但我没有看到它们。 其中一个Placeholder.js宣称自己“没有依赖关系（因此不需要包含jQuery，不像大多数占位符polyfill脚本）”。
编辑：对于那些“如何”如何“什么”更感兴趣，如何创建一个先进的HTML5占位符polyfill，通过创建一个jQuery插件来完成这个过程。
此外，请在IE10中关注占位符，以便了解如何通过IE10（与Firefox和Chrome不同）占位符文本消失。 不知道是否有解决这个问题的方法。
我的经验中最好的是https://github.com/mathiasbynens/jquery-placeholder（由html5please.com推荐）。 http://afarkas.github.com/webshim/demos/index.html在其更广泛的polyfills库中也有很好的解决方案。
使用jQuery实现，当需要提交时，您可以轻松地删除默认值。 下面是一个例子：
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
我知道你正在寻找一个覆盖，但你可能更喜欢这条路线的缓解（现在知道我上面写的）。 如果是这样，那么我写这个为我自己的项目，它的作品真的很好（需要jQuery），并只需要几分钟来实现您的整个网站。 它首先提供灰色文本，焦点时为浅灰色，而打字时为黑色。 只要输入字段为空，它也提供占位符文本。
首先设置您的表单并在输入标签中包含您的占位符属性。
<input placeholder="enter your email here">
只需复制此代码并将其另存为placeholder.js即可。
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
仅用于一个输入
$('#myinput').placeHolder(); // just one
这是我建议您在浏览器不支持HTML5占位符属性时在网站上的所有输入字段上实施它的方式：
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}