Question

我有一个表单，客户想要输入框内的标签，我决定使用HTML 5的占位符和Google的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" alt="Submit"/></a></span></p>

</form>

关于它为什么不起作用的任何想法？

修订：

使用下面评论中建议的代码，我已将代码更改为以下内容，但仍然无效。

脚本包括（该脚本的内容直接从here复制）：

<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script>

DOM ready事件监听器：

<body onload="Placeholders.init(true);">

Answer 1

HTML5 Shiv只为IE中以前未知的元素启用样式。最新版本会做一些额外的操作，例如修补document.createElement，但除此之外它不会填充任何内容。

如果要模仿placeholder，请使用占位符polyfill。如果您有兴趣，我用jQuery插件格式编写了一个：http://mths.be/placeholder

按如下方式使用：

$('input, textarea').placeholder();

以下是演示：http://mathiasbynens.be/demo/placeholder

顺便说一下，如果文字是“你的全名”等，你应该使用<label>而不是@placeholder。

Answer 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没有渲染占位符？

2 个答案: