0

所以，我遇到了这个问题，也许我只是想不直，但是网站如何处理这个问题的例子会有所帮助。

我想使用 HTML5 日期输入 - 它很好而且流畅。但是，我需要该日期最终作为日期字段输入 mysql 数据库中。问题不在于 HTML5 日期输入中的 post 值 - 而是当它恢复为旧浏览器上的文本时。

如果我通过输入说“请格式化 YYYY-MM-DD”（这将是一个从许多浏览器访问的高度公开的应用程序），那么当使用显示日期选择器的 Chrome 时，Chrome 会自动格式化为 MM/DD/YYYY显示的日期，我听说这是针对用户的本地化。

问题是这样的：如何放置一个“请格式化YYYY-MM-DD”标签，该标签仅在恢复为文本框时才会显示？如果我向最终用户指定他们需要以一种方式对其进行格式化，而日期选择器只允许他们以不同的方式进行格式化，那会不会令人绝望地混淆？我预计此表单将在多个语言环境中使用，因此我无法预期默认格式。

请注意，这是一个前端问题；我了解如何获取 POST 值，但需要向后兼容文本框的 POST 值统一。

4

1 回答 1

1

您可以按如下方式使用占位符属性：

<input type="date" name="myName" placeholder="Please format YYYY-MM-DD">

当浏览器无法识别日期类型时，它将呈现为文本输入。占位符显示在文本输入上，但不显示在日期输入上。

现在，不幸的是，根据caniuse，只有 IE 10+ 支持 placeholder 属性。我不确定这对你来说是否是个问题。

如果这是一个问题，您可以使用Modernizr来测试诸如占位符支持之类的功能并将适当的类添加到正文中。如果是这种情况，您可以编写一个类似以下内容的 CSS 规则：

.my-input-label {
  display: none;
}
.no-placeholder .my-input-label {
  display: inline-block; // Or block, if you need to support IE < 8
}

这将使标签显示在不支持占位符属性的任何东西上，但它们将从任何支持占位符属性的布局流中删除，从而优雅地降级。

最后，另一种选择是设置默认值。像这样的东西：

<input type="date" name="myName" value="Please format YYYY-MM-DD">

它没有那么优雅，从用户体验的角度来看更糟糕，但这种体验对于所有不支持date输入类型的浏览器都是通用的。

注意：我没有在 IE 上测试过 Modernizr 的课程，所以我不肯定课程是no-placeholder.

于 2013-03-03T06:03:08.603 回答