html5月份输入占位符答案

【问题标题】：Html5 month input placeholderhtml5月份输入占位符
【发布时间】：2019-09-13 02:02:19
【问题描述】：

有人知道我如何为input type month 添加占位符mm-aaaa，就像我们使用input type date 一样？我举个例子sn-p。

<body>
  <label for="month">Month: </label>
  <input type="month" placeholder="foo" name="foo" id="month">
  <label for="birth">Birth: </label>
  <input type="date" placeholder="foo" name="foo" id="birth">
</body>

我总是有-------- 字符，我不知道如何更改它。

谢谢

【问题讨论】：

placeholder = "foo" 应该可以工作，并且也可以在您的代码 sn-p 中工作。因此，该问题很可能是由您页面上的其他内容引起的。编辑：this question 也可能是相关的。
我在 chrome 上。我在 Firefox 上测试，我有一个简单的输入文本。似乎很多浏览器都不支持它。
我已经使用了placeholder='foo' 一百万次，而且它始终在 Chrome 和 Firefox 上都有效，所以如果你使用它们，它与浏览器无关。在这种情况下，您的页面上必须有 something 导致此行为。您是否在使用任何类型的库、框架或其他不是您编写的脚本？
@Tijmen 我看到--------（而不是foo）作为占位符。在 Windows/Chrome 上查看；在 Windows/IE 和 Windows/Firefox 上，我确实看到 foo 作为占位符
我看起来在 FF 或 IE (caniuse.com/#search=input%20date) 中不支持这种 input 类型，这可以解释为什么它会恢复为通用的 input 字段（以及为什么你的占位符有效在那些情况下）

标签： html

【解决方案1】：

我看起来在 FF 或 IE 中不支持这种输入类型 (caniuse.com/#search=input%20date)

对于那些浏览器，它似乎将 type 属性设置为 text 您的占位符工作的地方（正常）

对于Chrome（似乎支持它），它似乎不允许您将两个属性结合起来。

您可以伪造类似于下面的占位符，但在选择输入后我没有设法使值保持不变（并且占位符不会重新出现）。

input[type="month"]::before{
  content: attr(placeholder) !important;
  color: #aaa;
  width: 100%;
}

input[type="month"]:focus::before,
input[type="month"]:active::before {
  content: "";
  width: 0%;
}

&lt;input type="month" placeholder="foo" name="foo" id="month"&gt;

【讨论】：

嘿，不错的选择，不完整但很聪明。我会切换到更受支持的东西，比如 jquery 插件，但谢谢
@blurfus 我扩展了您的解决方案以使其工作！只需将 :invalid 属性添加到第一个选择器并将所需的属性放入输入中。请更新您的答案。 :)
@blurfus 将重要的关键字也添加到 (content: "") 以便它覆盖第一个

【解决方案2】：

输入类型month 只能用于选择月份，查看以下示例：

&lt;input type="month" value="2019-05" name="foo" id="month"&gt;

更多详情可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month

【讨论】：