Html 如何在 IE8 和 9 中支持占位符属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15020826/
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
How to support placeholder attribute in IE8 and 9
提问by Arbejdsgl?de
I have a small issue, the placeholderattribute for input boxes is not supported in IE 8-9.
我有一个小问题，placeholderIE 8-9 不支持输入框的属性。
What is the best way to make this support in my project (ASP Net). I am using jQuery. Need I use some other external tools for it?
在我的项目（ASP Net）中提供这种支持的最佳方法是什么。我正在使用 jQuery。我需要使用其他一些外部工具吗？
Is http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.htmla good solution?
是http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html好的解决办法？
采纳答案by red_alert
You could use this jQuery plugin: https://github.com/mathiasbynens/jquery-placeholder
你可以使用这个 jQuery 插件：https: //github.com/mathiasbynens/jquery-placeholder
But your link seems to be also a good solution.
但是您的链接似乎也是一个很好的解决方案。
回答by starbeamrainbowlabs
You can use any one of these polyfills:
您可以使用以下任何一种 polyfill：
- https://github.com/jamesallardice/Placeholders.js(doesn't support password fields)
- https://github.com/chemerisuk/better-placeholder-polyfill
- https://github.com/jamesallardice/Placeholders.js（不支持密码字段）
- https://github.com/chemerisuk/better-placeholder-polyfill
These scripts will add support for the placeholderattribute in browsers that do not support it, and they do not require jQuery!
这些脚本将placeholder在不支持的浏览器中添加对属性的支持，并且不需要 jQuery！
回答by azote
the $.Browser.msieis not on the latest JQuery anymore... you have to use the $.support
在$ .Browser.msie是不是最新的JQuery了...你必须使用$。支持
like below:
像下面这样：
<script>
(function ($) {
$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);
//fix for IE7 and IE8
$(function () {
if (!$.support.placeholder) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
});
});
}
});
</script>
回答by Ravi Gadag
if you use jquery you can do like this. from this site Placeholder with Jquery
如果您使用 jquery，您可以这样做。从这个站点占位符与 Jquery
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
these are the alternate links
这些是备用链接
- Placeholder jquery library
- HTML5 polyfills-- go for placeholder section
回答by Alex Harper
I had compatibility issues with several plugins I tried, this seems to me to be the simplest way of supporting placeholders on text inputs:
我尝试过的几个插件存在兼容性问题，这在我看来是支持文本输入占位符的最简单方法：
function placeholders(){
//On Focus
$(":text").focus(function(){
//Check to see if the user has modified the input, if not then remove the placeholder text
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
}
});
//On Blur
$(":text").blur(function(){
//Check to see if the use has modified the input, if not then populate the placeholder back into the input
if( $(this).val() == ""){
$(this).val($(this).attr("placeholder"));
}
});
}
回答by Rejeesh Prarath
$(function(){
if($.browser.msie && $.browser.version <= 9){
$("[placeholder]").focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
}).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});
try this
尝试这个
回答by Florislw
I use thisone, it's only Javascript.
我使用thisone，它只是Javascript。
I simply have an input element with a value, and when the user clicks on the input element, it changes it to an input element without a value.
我只是有一个带有值的输入元素，当用户单击输入元素时，它会将其更改为没有值的输入元素。
You can easily change the color of the text using CSS. The color of the placeholder is the color in the id #IEinput, and the color your typed text will be is the color in the id #email. Don'tuse getElementsByClassName, because the versions of IE that don't support a placeholder, don't support getElementsByClassName either!
您可以使用 CSS 轻松更改文本的颜色。占位符的颜色是 id #IEinput 中的颜色，您输入的文本的颜色是 id #email 中的颜色。不要使用getElementsByClassName，因为不支持占位符的IE版本也不支持getElementsByClassName！
You can use a placeholder in a password input by setting the type of the original password input to text.
您可以通过将原始密码输入的类型设置为文本，在密码输入中使用占位符。
Tinker: http://tinker.io/4f7c5/1- JSfiddle servers are down!
Tinker：http://tinker.io/4f7c5/1 - JSfiddle 服务器已关闭！
*sorry for my bad english
*对不起，我的英语不好
JAVASCRIPT
爪哇脚本
function removeValue() {
document.getElementById('mailcontainer')
.innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
document.getElementById('email').focus(); }
HTML
HTML
<span id="mailcontainer">
<input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
回答by JediCate
For others landing here. This is what worked for me:
对于其他登陆这里的人。这对我有用：
//jquery polyfill for showing place holders in IE9
$('[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('');
}
})
});
Just add this in you script.js file. Courtesy of http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
只需将其添加到您的 script.js 文件中即可。由http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 提供
回答by user3776645
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
回答by Aman
Add the below code and it will be done.
添加下面的代码，它会完成。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
<script type="text/javascript">
// Mock client code for testing purpose
$(function(){
// Client should be able to add another change event to the textfield
$("input[name='input1']").blur(function(){ alert("Custom event triggered."); });
// Client should be able to set the field's styles, without affecting place holder
$("textarea[name='input4']").css("color", "red");
// Initialize placeholder
$.Placeholder.init();
// or try initialize with parameter
//$.Placeholder.init({ color : 'rgb(255, 255, 0)' });
// call this before form submit if you are submitting by JS
//$.Placeholder.cleanBeforeSubmit();
});
</script>
Download the full code and demo from https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip
从https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip下载完整代码和演示
