HTML 表单“占位符”在 IE 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11296602/
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
HTML Form "placeholder" not working in IE 8
提问by Tom
Hi I have created a form on my website. I am using placeholder="Full Name"but nothing is showing up in the form when viewed in IE8 (and probably other IE versions)
嗨，我在我的网站上创建了一个表单。我正在使用，placeholder="Full Name"但在 IE8（可能还有其他 IE 版本）中查看时，表单中没有显示任何内容
I have tried using value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"but the form is still empty. For some reason 'Full Name' shows up when you click on the form, then off it.
我试过使用，value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"但表格仍然是空的。出于某种原因，当您单击表单时会显示“全名”，然后将其关闭。
The website I am working on is [usspcatalystcentre.org.uk][1] and you can see what I mean. The first two forms (Title & Full Name) is where I have tried using
我正在开发的网站是 [usspcatalystcentre.org.uk][1]，你可以明白我的意思。前两种形式（标题和全名）是我尝试使用的地方
value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"
The rest of the form are where I have just used placeholder
表格的其余部分是我刚刚使用的地方 placeholder
Here is the actual code I am working on
这是我正在处理的实际代码
<form action="contact.php" method="post">
<input id=title name=title type=text value="" onfocus="if(this.value=='Username') this.value='';" onblur="if(this.value=='') this.value='Username';" required class="top-formfields" value='<?php print $_SESSION['title']?>'> <br /><br />
<input id=fullname name=fullname type=text value="" onfocus="if(this.value=='Full Name') this.value='';" onblur="if(this.value=='') this.value='Full Name';" required class="top-formfields" value='<?php print $_SESSION['fullname']?>'> <br /><br />
<input id=companyname name=companyname type=text placeholder="Company Name" required class="top-formfields" value='<?php print $_SESSION['companyname']?>'> <br /><br />
<input id=companynumber name=companynumber type=text placeholder="Company Registered Number" required class="top-formfields" value='<?php print $_SESSION['companynumber']?>'> <br /><br />
<textarea id=address name=address rows=5 placeholder="Address" required class="top-textarea"><?php print $_SESSION['address']?></textarea> <br /><br />
<input id=postcode name=postcode type=text placeholder="Post Code" required class="top-formfields" value='<?php print $_SESSION['postcode']?>'> <br /><br />
<input id=phonenumber name=phonenumber type=text placeholder="Phone Number" required class="top-formfields" value='<?php print $_SESSION['phonenumber']?>'> <br /><br />
<input id=email name=email type=text placeholder="Email" required class="top-formfields" value='<?php print $_SESSION['email']?>'> <br /><br />
<input id=mobile name=mobile type=text placeholder="Mobile" required class="top-formfields" value='<?php print $_SESSION['mobile']?>'> <br /><br />
<input id=website name=website type=text placeholder="Website URL" required class="top-formfields" value='<?php print $_SESSION['website']?>'> <br /><br />
Thanks in advance, Tom
提前致谢，汤姆
回答by Zoltan Toth
The placeholderattribute is a new HTML5 improvement. It's not supported in older IE-s -
http://diveintohtml5.info/forms.html
该placeholder属性是新的 HTML5 改进。较旧的 IE-s 不支持它 -
http://diveintohtml5.info/forms.html
To mimic it cross-browser you might want to use jQuery - example
要跨浏览器模仿它，您可能需要使用 jQuery -示例
回答by Aamir Shahzad
IE-9 do not support place holder so the first solution that come up in my mind is this.
IE-9 不支持占位符，所以我想到的第一个解决方案是这个。
good luck!
祝你好运！
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[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()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>
回答by Rick Paul
Tom, placeholder isn't an attribute supported by IE8.
汤姆，占位符不是 IE8 支持的属性。
I think this will help you with the direction you are going:
我认为这将帮助您确定前进的方向：
Pre-populate the field with "Full Name". Give it value="Full Name" in advance as the default.
使用“全名”预先填充该字段。预先给它 value="Full Name" 作为默认值。
onfocus= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}"
onclick= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}"
onblur= "if (this.value==''||this.value=='Full Name'){this.value='Full Name';this.style.color='#999999';}else{this.style.color='#000000';}"
onkeyup= "if (this.value=='Full Name'){this.select();this.style.color='#999999';}else{this.style.color='#000000';}"
onchange="if (this.value=='Full Name'){this.style.color='#999999';}else{this.style.color='#000000';}"
回答by Santos L. Victor
if (!('placeholder' in $('<input>')[0])) { // Create a dummy element for feature detection
$('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); // Select the elements that have a placeholder attribute
$('form').submit(function(){$(this).find('input[placeholder], textarea[placeholder]').each(remove);}); // Remove the placeholder text before the form is submitted
}
回答by Charix
Save the following code as .jsand make sure to change the input type
将以下代码另存为.js并确保更改输入类型
$(document).ready(function () {
if ($.browser.msie) { //this is for only ie condition ( microsoft internet explore )
$('input[type="text"][placeholder], textarea[placeholder]').each(function () {
var obj = $(this);
if (obj.attr('placeholder') != '') {
obj.addClass('IePlaceHolder');
if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') {
obj.val(obj.attr('placeholder'));
}
}
});
$('.IePlaceHolder').focus(function () {
var obj = $(this);
if (obj.val() == obj.attr('placeholder')) {
obj.val('');
}
});
$('.IePlaceHolder').blur(function () {
var obj = $(this);
if ($.trim(obj.val()) == '') {
obj.val(obj.attr('placeholder'));
}
});
}
});
回答by Michel Arteta
Make sure to add browser detection if you're using jQuery 1.9+. You can install it from your terminal with this command npm install jquery.browser
如果您使用 jQuery 1.9+，请确保添加浏览器检测。您可以使用此命令从终端安装它 npm install jquery.browser
