谷歌的html5 shiv不能渲染占位符？

Question

谷歌的html5 shiv不能渲染占位符？

4

我有一个表单，客户希望在输入框内部放置标签，我决定使用HTML 5的placeholder和Google的html5shiv，而不是旧的javascript。然而，我的placeholder在IE中似乎不能正常工作，这也是我使用shiv的原因。以下是代码：

Doctype：

<!DOCTYPE html>

Shiv:

<!--[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>

有什么想法，为什么它不起作用？

修订：

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

包含脚本（该脚本的内容直接从此处复制）：

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

DOM准备就绪事件监听器：

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

- Phil Young

1

代码中似乎没有提及placeholder属性的参考（https://github.com/aFarkas/html5shiv/tree/master/src）。html5shiv是否真的应该对它们进行shim？ - pimvdb

1

据我所知，html5shiv对“placeholder”属性没有任何作用。但是有各种shim可用（主要是jQuery）...请参见Modernizr获取列表，或者使用我的尝试（不需要jQuery）。 - James Allardice

@JamesAllardice 我已经尝试了您的代码，但它并没有起作用。请查看修订版。 - Phil Young

@PhilFaceplantYoung - 看看是哪个版本？ - James Allardice

@JamesAllardice 现在已经修复了，看起来我在复制时漏掉了一个分号。 - Phil Young

显示剩余5条评论

2个回答

0

还可以查看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'));
});

我已经比较了提供的两种方法，水印似乎更适合处理密码输入，但设置水印并不是那么容易。

- Ian Robertson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathias Bynens · Accepted Answer

HTML5 Shiv只是使IE浏览器支持以前未知的HTML元素的样式化。最新版本额外做了一些事情，比如修补document.createElement，但除此之外它并没有填充任何东西。

如果想要模拟placeholder，请使用占位符填充。如果您感兴趣，我已经编写了一个jQuery插件格式的填充程序：http://mths.be/placeholder 按照以下方式使用它：

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

这里有一个演示：http://mathiasbynens.be/demo/placeholder

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