HTML5和占位符：如何逐步实现？

Question

我在考虑使用HTML5的placeholder属性。如果浏览器不支持HTML5，我可以使用jQuery作为后备方案。但是，如果JS被关闭了怎么办？如何使用渐进增强的理念来解决这个问题？

- StackOverflowNewbie

---

由于您在下面的评论中表示不喜欢使用“占位符”来标记“输入”（就像目前流行的方式，例如 Stack Overflow 的搜索栏），即使是动态的，我猜可以安全地假设您想要将占位符用于其他方面。那么，您打算如何使用它们呢？ - John Flatness

Answer 1

为什么不展示一个实际的 <label> 元素并用 js 隐藏它呢？

// js file
$('label').hide();

那么，如果没有js，他们将看到一个普通的标签；有了js，标签将被删除，您将获得jquery占位符或html5占位符。

- swatkins

---

这是我能想到的唯一一种真正实现“渐进增强”的方法。我会稍微修改一下，让你的JavaScript代码不仅仅隐藏标签，而是从标签文本动态创建一个placeholder，这样就不必在HTML源代码中重复了。 - John Flatness

好的，你并没有移除这个标签，而是隐藏它。因此，从语义上讲，你是没问题的。同时屏幕阅读器也能获取到这个标签。 - swatkins

@mozillanerd - 我不同意。这个答案的整个重点是，无论JS是否可用，它都会产生有用的东西。 - nnnnnn

@mozillanerd - 你能解释一下为什么你认为这不是一个好的推荐吗？ - swatkins

语义上并不差，只是这是一种妥协。这是针对“如果我们不能使用占位符怎么办？”的情况，因此可能会有一个实际的（语义）标签，然后我们只是添加另一个提示，该提示将放在占位符中（如果支持占位符）。 - nnnnnn

是的，它是语义化的。语义是关于在文档结构内使用结构元素来准确定义文档内容的。在这个答案中，您使用 <label> 来“标记”您的输入元素 - 您不能比这更语义化了。规范之所以说不要使用占位符作为标签的替代品，是因为占位符没有“结构上”的优势；它只是一个属性。问题是如何使用渐进增强来利用 html5 占位符，然后回退到 js 解决方案，再次回退。 - swatkins