将标签放在文本输入中 - 在 IE7 中不起作用答案

【问题标题】：Putting labels inside text inputs - not working in IE7将标签放在文本输入中 - 在 IE7 中不起作用
【发布时间】：2012-10-23 09:31:14
【问题描述】：

我正在为一家培训机构制作在线报名表。文本输入框的标签已使用http://attardi.org/labels/ 的解决方案放置在输入本身内

它在 Chrome、Firefox、IE9 和 IE8 中完美运行，但由于某种原因在 IE7 中出现了问题（惊喜，惊喜！）

如果我单击标签所在区域的输入字段，浏览器不会关注输入。只有当我点击标签后的空白区域时，输入字段才会生效，或者奇怪的是，如果我点击输入字段下方的位置。

这是 CSS 还是 JavaScript 问题，谁能提出解决方案？

您可以通过http://testing.xenongroupadmin.com/enrolment 访问完整的表单，但请注意 - HTML、CSS 和 HTML 文件非常庞大，可能需要一些时间来筛选！

【问题讨论】：

【解决方案1】：

放弃您已链接到的脚本。

使用常规 html5 placeholder 属性 (http://davidwalsh.name/html5-placeholder) - 这是在大多数浏览器中获得所需内容的最简洁的解决方案。要处理 IE7/8，您可以使用 javascript shiv，例如：http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

【讨论】：