谷歌的 html5 shiv 不呈现占位符？
Posted
技术标签:
【中文标题】谷歌的 html5 shiv 不呈现占位符？【英文标题】：Google's html5 shiv not rendering placeholders? 【发布时间】：2012-03-05 20:03:57 【问题描述】：我有一个表单，客户希望输入框内的标签，我决定使用 html 5 的占位符和谷歌的 html5shiv，而不是旧的 javascript。然而，我的占位符在 IE 中似乎无法正常工作，而这正是我使用 shiv 的目的。代码如下：
文档类型：
<!DOCTYPE html>
希夫：
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
表格：
<form method="post" enctype="multipart/form-data" name="contactForm" id="contactForm">
<input type="text" name="name" id="name" placeholder="Your Full Name..." />
<input type="text" name="telephone" id="telephone" placeholder="Your Telephone Number..." />
<input type="email" name="email" id="email" placeholder="Your Email Address..." />
<textarea name="enquiry" id="enquiry" placeholder="Your Enquiry or Comments..."></textarea>
<p class="midpadLeft green_Button_margin_2"><span class="green_Button_2"><a href="javascript: document.contactForm.submit();" target="_self" class="green_Button_2">Submit Enquiry <img src="images/mid-envelope.png" /></a></span></p>
</form>
关于它为什么不起作用的任何想法？
修订：
使用下面 cmets 中建议的代码，我已将代码更改为以下，但仍然无法正常工作。
脚本包括（该脚本的内容直接从here复制）：
<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script>
DOM 就绪事件监听器：
<body onload="Placeholders.init(true);">
【问题讨论】：
似乎没有对占位符属性in the code 的任何引用。 html5shiv 实际上应该填充它们吗？ 据我所知，html5shiv 对placeholder 属性没有任何作用。虽然有各种可用的垫片（主要是 jQuery）...请参阅 Modernizr 以获取列表，或 my own attempt（不需要 jQuery）
@JamesAllardice 我已经尝试过您的代码，但它不起作用。请查看修订版
@PhilFaceplantYoung - 查看什么版本？
我刚刚加的那个，对不起，我应该按相反的顺序做的
【参考方案1】：
HTML5 Shiv 只是为 IE 中以前未知的元素启用样式。最新版本做了一些额外的事情，比如修补 document.createElement，但除此之外它没有填充任何东西。
如果您想模拟 placeholder，请使用占位符 polyfill。我写了一个 jQuery 插件格式，如果你有兴趣：http://mths.be/placeholder
如下使用：
$('input, textarea').placeholder();
这是一个演示：http://mathiasbynens.be/demo/placeholder
顺便说一句，如果文本是“您的全名”等，您应该使用 <label> 而不是 @placeholder。
【讨论】：
我在使用 asp:TextBox 和这个脚本时遇到了问题。该控件有一个与之关联的 aspRequiredValidator 控件，该控件无法捕获任何值，从而导致回发。删除占位符插件可以解决此问题。有什么解决办法吗？【参考方案2】：查看 Todd Northrop 的 jquery.watermark NuGet 包。
//polyfill placeholder in older browsers
var inputs = $('input, textarea');
$.each(inputs, function (i, itm)
var input = $(itm);
input.watermark(input.attr('placeholder'));
);
我比较了提供的两种方法，水印似乎更好地应对密码输入，但设置水印并不那么容易。
【讨论】：
以上是关于谷歌的 html5 shiv 不呈现占位符？的主要内容，如果未能解决你的问题，请参考以下文章