Javascript IE9 中的占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6366021/
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 in IE9
提问by chriscatfr
It seems it's a very well known problem but all the solutions I found on Google don't work on my newly downloaded IE9.
这似乎是一个众所周知的问题，但我在 Google 上找到的所有解决方案都不适用于我新下载的 IE9。
Which is your favorite way in order to enable the Placeholderproperty on the inputand textareatags?
您最喜欢哪种方式来启用和标签Placeholder上的属性？inputtextarea
Optional: I lost a lot of time on that and didn't look for the requiredproperty yet. Would you also have some advice for this? Obviously I can check the value in PHP, but to help the user this property is very convenient.
可选：我在这件事上浪费了很多时间，还没有寻找required房产。对此，您是否也有一些建议？显然我可以在 PHP 中检查该值，但是这个属性对于帮助用户来说是非常方便的。
回答by Chris Jacob
HTML5 Placeholder jQuery Plugin
- by Mathias Bynens(a collaborator on HTML5 Boilerplateand jsPerf)
HTML5 Placeholder jQuery 插件
- Mathias Bynens（HTML5 Boilerplate和jsPerf 的合作者）
https://github.com/mathiasbynens/jquery-placeholder
https://github.com/mathiasbynens/jquery-placeholder
Demo & Examples
演示和示例
http://mathiasbynens.be/demo/placeholder
http://mathiasbynens.be/demo/placeholder
p.s
I have used this plugin many times and it works a treat. Also it doesn'tsubmit the placeholder text as a value when you submit your form (... a real pain I found with other plugins).
ps
这个插件我用过很多次了，效果很好。当您提交表单时，它也不会将占位符文本作为值提交（......我发现其他插件真的很痛苦）。
回答by matt
I think this is what you are looking for: jquery-html5-placeholder-fix
我认为这就是你要找的：jquery-html5-placeholder-fix
This solution uses feature detection (via modernizr) to determine if placeholder is supported. If not, adds support (via jQuery).
此解决方案使用功能检测（通过modernizr）来确定是否支持占位符。如果没有，添加支持（通过 jQuery）。
回答by Mark Rhodes
If you want to do it without using jquery or modenizer you can use the code below:
如果你想在不使用 jquery 或 modenizer 的情况下做到这一点，你可以使用下面的代码：
(function(){
"use strict";
//shim for String's trim function..
function trim(string){
return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
}
//returns whether the given element has the given class name..
function hasClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return false;
var regex = new RegExp("(^|\s)" + className + "(\s|$)");
return regex.test(element.className);
}
function removeClassName(element, className){
//refactoring of Prototype's function..
var elClassName = element.className;
if(!elClassName)
return;
element.className = elClassName.replace(
new RegExp("(^|\s+)" + className + "(\s+|$)"), ' ');
}
function addClassName(element, className){
var elClassName = element.className;
if(elClassName)
element.className += " " + className;
else
element.className = className;
}
//strings to make event attachment x-browser..
var addEvent = document.addEventListener ?
'addEventListener' : 'attachEvent';
var eventPrefix = document.addEventListener ? '' : 'on';
//the class which is added when the placeholder is being used..
var placeHolderClassName = 'usingPlaceHolder';
//allows the given textField to use it's placeholder attribute
//as if it's functionality is supported natively..
window.placeHolder = function(textField){
//don't do anything if you get it for free..
if('placeholder' in document.createElement('input'))
return;
//don't do anything if the place holder attribute is not
//defined or is blank..
var placeHolder = textField.getAttribute('placeholder');
if(!placeHolder)
return;
//if it's just the empty string do nothing..
placeHolder = trim(placeHolder);
if(placeHolder === '')
return;
//called on blur - sets the value to the place holder if it's empty..
var onBlur = function(){
if(textField.value !== '') //a space is a valid input..
return;
textField.value = placeHolder;
addClassName(textField, placeHolderClassName);
};
//the blur event..
textField[addEvent](eventPrefix + 'blur', onBlur, false);
//the focus event - removes the place holder if required..
textField[addEvent](eventPrefix + 'focus', function(){
if(hasClassName(textField, placeHolderClassName)){
removeClassName(textField, placeHolderClassName);
textField.value = "";
}
}, false);
//the submit event on the form to which it's associated - if the
//placeholder is attached set the value to be empty..
var form = textField.form;
if(form){
form[addEvent](eventPrefix + 'submit', function(){
if(hasClassName(textField, placeHolderClassName))
textField.value = '';
}, false);
}
onBlur(); //call the onBlur to set it initially..
};
}());
For each text field you want to use it for you need to run placeHolder(HTMLInputElement), but I guess you can just change that to suit! Also, doing it this way, rather than just on load means that you can make it work for inputs which aren't in the DOM when the page loads.
对于您想要使用它的每个文本字段，您都需要运行placeHolder(HTMLInputElement)，但我想您可以更改它以适应！此外，这样做，而不仅仅是在加载时意味着您可以使其在页面加载时适用于不在 DOM 中的输入。
Note, that this works by applying the class: usingPlaceHolderto the input element, so you can use this to style it (e.g. add the rule .usingPlaceHolder { color: #999; font-style: italic; }to make it look better).
请注意，这是通过将 class:usingPlaceHolder应用于 input 元素来工作的，因此您可以使用它来设置样式（例如添加规则.usingPlaceHolder { color: #999; font-style: italic; }以使其看起来更好）。
回答by Stanislav Pisockij
Here is a much better solution. http://bavotasan.com/2011/html5-placeholder-jquery-fix/I've adopted it a bit to work only with browsers under IE10
这是一个更好的解决方案。 http://bavotasan.com/2011/html5-placeholder-jquery-fix/我已经采用了一点，仅适用于 IE10 下的浏览器
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<script>
// Placeholder fix for IE
$('.lt-ie10 [placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
//if($(this).validationEngine('validate')) { // If using validationEngine
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
i.removeClass('placeholder');
})
//}
});
</script>
...
</html>
回答by Erdem KAYA
If you want to input a description you can use this. This works on IE 9 and all other browsers.
如果你想输入一个描述，你可以使用它。这适用于 IE 9 和所有其他浏览器。
<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
回答by Etienne Dupuis
Using mordernizrto detect browsers that are not supporting Placeholder, I created this short code to fix them.
使用mordernizr以检测不支持浏览器的占位符，我创造了这个短代码来解决这些问题。
//If placeholder is not supported
if (!Modernizr.input.placeholder){
//Loops on inputs and place the placeholder attribute
//in the textbox.
$("input[type=text]").each( function() {
$(this).val($(this).attr('placeholder'));
})
}
回答by decadenza
I know I'm late but I found a solution inserting in the head the tag:
我知道我迟到了，但我找到了一个在头部插入标签的解决方案：
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->回答by egr103
A bit late to the party but I use my tried and trusted JS that takes advantage of Modernizr. Can be copy/pasted and applied to any project. Works every time:
参加聚会有点晚，但我使用了我久经考验且值得信赖的 JS，它利用了Modernizr。可以复制/粘贴并应用于任何项目。每次都有效：
// Placeholder fallback
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
回答by Suresh Gupta
to make it work in IE-9 use below .it works for me
使其在 IE-9 中工作，请使用下面的 .it 对我有用
JQuery need to include:
JQuery 需要包括：
jQuery(function() {
jQuery.support.placeholder = false;
webkit_type = document.createElement('input');
if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text, textarea, :password').focus(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
CSS Style need to include:
CSS 样式需要包括：
.hasPlaceholder {color: #aaa;}
回答by Günay Gültekin
I searched on the internet and found a simple jquery code to handle this problem. In my side, it was solved and worked on ie 9.
我在互联网上搜索并找到了一个简单的jquery代码来处理这个问题。在我这边，它已经解决并在 ie 9 上工作。
$("input[placeholder]").each(function () {
var $this = $(this);
if($this.val() == ""){
$this.val($this.attr("placeholder")).focus(function(){
if($this.val() == $this.attr("placeholder")) {
$this.val("");
}
}).blur(function(){
if($this.val() == "") {
$this.val($this.attr("placeholder"));
}
});
}
});
