HTML 表单“占位符”在 IE 8 中不起作用
Posted
技术标签:
【中文标题】HTML 表单“占位符”在 IE 8 中不起作用【英文标题】:HTML Form "placeholder" not working in IE 8 【发布时间】:2012-07-03 00:57:58 【问题描述】:您好,我在我的网站上创建了一个表单。我正在使用placeholder="Full Name"
,但在 IE8(可能还有其他 IE 版本)中查看时,表单中没有显示任何内容
我尝试过使用value="" onfocus="if (this.value == 'Full Name') this.value = '';" onblur="if (this.value == '') this.value = 'Full Name';"
,但表单仍然是空的。出于某种原因,当您单击表单时会显示“全名”,然后将其关闭。
我正在开发的网站是 [usspcatalystcentre.org.uk][1],你可以明白我的意思。前两种形式(标题和全名)是我尝试使用的地方
value="" onfocus="if (this.value == 'Full Name') this.value = '';" onblur="if (this.value == '') this.value = 'Full Name';"
表格的其余部分是我刚刚使用的placeholder
这是我正在处理的实际代码
<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 />
提前致谢,汤姆
【问题讨论】:
任何版本的 IE 都不支持占位符属性。 【参考方案1】:placeholder
属性是一项新的 html5 改进。较旧的 IE-s 不支持它 -
http://diveintohtml5.info/forms.html
要跨浏览器模仿它,您可能需要使用 jQuery - example
【讨论】:
jQuery 是一个通用的客户端 JS 库,它没有为placeholder
提供 polyfill。
@Quentin 当然.. 这就是我说 模仿 的原因 - 它可以给你感觉,而不是支持【参考方案2】:
IE-9 不支持占位符,所以我想到的第一个解决方案就是这个。
祝你好运!
<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>
【讨论】:
【参考方案3】:Tom,占位符不是 IE8 支持的属性。
我认为这将帮助您确定前进的方向:
使用“全名”预填充该字段。提前给它 value="Full Name" 作为默认值。
onfocus= "if (this.value=='Full Name')this.select();this.value='';this.style.color='#999999';elsethis.style.color='#000000';"
onclick= "if (this.value=='Full Name')this.select();this.value='';this.style.color='#999999';elsethis.style.color='#000000';"
onblur= "if (this.value==''||this.value=='Full Name')this.value='Full Name';this.style.color='#999999';elsethis.style.color='#000000';"
onkeyup= "if (this.value=='Full Name')this.select();this.style.color='#999999';elsethis.style.color='#000000';"
onchange="if (this.value=='Full Name')this.style.color='#999999';elsethis.style.color='#000000';"
【讨论】:
【参考方案4】: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
【讨论】:
请给你的答案添加一些解释!【参考方案5】:将以下代码另存为.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'));
);
);
http://jsfiddle.net/wbcTm/79/
【讨论】:
【参考方案6】:如果您使用的是 jQuery 1.9+,请确保添加浏览器检测。您可以使用以下命令从终端安装它 npm install jquery.browser
【讨论】:
以上是关于HTML 表单“占位符”在 IE 8 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章