twitter-bootstrap 占位符在 IE9 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17696646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
placeholder is not working in IE9
提问by Javascript Coder
I am salesforce (SFDC) developer. In my visualforce page for input box I am using placeholder code.
我是 salesforce (SFDC) 开发人员。在我的输入框visualforce 页面中，我使用了占位符代码。
<div class="control-group">
<label class="control-label visible-desktop" for="first_name">First Name</label>
<div class="controls">
<input class="input-block-level" name="First Name" id="first_name" placeholder="First Name" value="" type="text" required="required" autofocus="autofocus" />
</div>
</div>
I checked in internet for some CSS hack but I didn't find any. I find some javascript hack.
我在互联网上查看了一些 CSS hack，但没有找到。我发现了一些 javascript hack。
HTML5 Placeholder jQuery Plugin
HTML5 占位符 jQuery 插件
https://github.com/mathiasbynens/jquery-placeholder
https://github.com/mathiasbynens/jquery-placeholder
Demo & Examples
演示和示例
http://mathiasbynens.be/demo/placeholder
http://mathiasbynens.be/demo/placeholder
But I don't want to use jQuery hack or something.
但我不想使用 jQuery hack 或其他东西。
采纳答案by DarkMantis
As IE9 doesn't support the placeholder attribute, you can do it in Javascript/jQuery like so (quickly written, not tested):
由于 IE9 不支持占位符属性，您可以在 Javascript/jQuery 中这样做（快速编写，未测试）：
if(navigator.appVersion.match(/MSIE [\d.]+/)){
var placeholderText = 'Some Placeholder Text';
$('#first_name').val(placeholderText);
$('#first_name').blur(function(){
$(this).val() == '' ? $(this).val(placeholderText) : false;
});
$('#first_name').focus(function(){
$(this).val() == placeholderText ? $(this).val('') : false;
});
}
Do the same for the blur event too, then that will mimic a placeholder attribute.
对模糊事件也做同样的事情，然后将模仿占位符属性。
[Edit]
[编辑]
Okay, after rethinking this (due to the comment) this is really not the most elegant solution (however it does work), so I would disregard this answer totally.
好的，在重新思考这个（由于评论）之后，这真的不是最优雅的解决方案（但它确实有效），所以我会完全无视这个答案。
回答by dharmesh
if(navigator.appVersion.match(/MSIE [\d.]+/)){
$(document).find("input[placeholder]").each(function(){
if($.trim($(this).val()) == ""){
$(this).val($(this).attr("placeholder")).addClass('placeholder');
}
$(this).on("focus",function(){
$(this).hasClass('placeholder') ? $(this).val('').removeClass('placeholder') : false;
}).on("blur",function(){
$(this).val() == '' ? $(this).val($(this).attr("placeholder")).addClass('placeholder') :false;
});
});
}
回答by Clarence
A little simpler answer worked for me not being very trusting of Regex (my downfall)
一个更简单的答案对我不太信任正则表达式（我的垮台）有用
function setPlaceHolderForIE9() {
var pos = window.navigator.userAgent.indexOf("MSIE");
if (pos > 0) {
if (window.navigator.userAgent.substring(pos + 5, window.navigator.userAgent.indexOf(".", pos)) < 10) {
//alert($("input[placeholder]").val($("input[placeholder]").attr("placeholder")));
$("input[placeholder]").each(function () {
$(this).val($(this).attr("placeholder"));
});
$("input[placeholder]").click(function () {
if ($(this).val() === $(this).attr("placeholder")) {
$(this).val('');
}
});
$('input[placeholder]').blur(function () {
if ($.trim($(this).val()).length === 0) {
$(this).val($(this).attr("placeholder"));
}
});
}
}
}
