HTML5占位符背后的逻辑答案

【问题标题】：Logic behind HTML5 PlaceholderHTML5占位符背后的逻辑
【发布时间】：2013-08-01 18:12:52
【问题描述】：

我正在处理一个表单。每个输入字段名称由其占位符标识。我的表单在 Chrome 和 Mozilla 中运行良好，但在 IE7 和 IE8 中失败，因为这些浏览器不支持 HTML5 的占位符属性。

我的表格分为 4 个部分。当用户填写第一部分并单击保存并继续时，会在数据库上触发触发器并显示表单的第二部分，依此类推

为了在 IE 中实现占位符，我尝试了各种插件，我也创建了自己的一个，但一切都失败了，因为如果我将该字段留空，占位符值将保存在数据库中。

HTML5 占位符在 chrome 中对我来说很好用。因此，如果有人可以向我提供 HTML5 占位符的逻辑，我会将其写在 jquery 中以在 IE 中获得相同的功能。

【问题讨论】：

如果输入的值与默认值（占位符）相同，则不发送。如果输入值等于空字符串，则将输入值设置为占位符一。老实说，你不应该尝试为不支持它的浏览器实现占位符，而是使用经典标签。
复制stackoverflow.com/questions/10335610/…
@roasted 我选择完全忽略 IE，但是如果你想支持它，roasted 的方法是你最好的解决方案 IMO。
我已经实现了，但我的占位符值在保存并继续按钮单击时被保存。
我认为占位符文本是浏览器 UI 的一部分，而不是输入的“值”。如果你真的想在 IE 8 中使用它，并且不介意有点复杂，你可以像这样模拟它：jsfiddle.net/zcuah

标签： jquery html

【解决方案1】：

您可以创建一个 jquery 函数，该函数在加载文档时将输入的值初始化为某些文本（这应该是您的占位符），然后当出现 onclick 事件时将此值设置为“”（无）输入。希望对你有帮助

【讨论】：

【解决方案2】：

试试这个JSFiddle。

_selector 是我创建的自定义变量。只需将该行更改为您要放置此占位符的任何字段的 ID。您可以利用 _placeholder 在字段中包含您想要的任何占位符文本:)。

我只是在用户单击输入字段内部（或外部）时更改输入字段的 css 和 html 属性。

这种技术的一个问题是，当您发布表单时，它会认为值已设置（因为该值是 _placeholder（或本例中的“地址”）。最好的办法是检查该值是否为等于您在 PHP 脚本中的占位符。如果是，您可以告诉您的脚本使用“”而不是 var。

【讨论】：

【解决方案3】：

搭配@Hamdi，你可以试试jQuery。 This 是一篇非常好的文章。

【讨论】：