HTML5 输入 type=number 和 placeholder 属性

Posted 2023-03-05

【中文标题】HTML5 输入 type=number 和 placeholder 属性

【英文标题】：HTML5 input type=number and the placeholder attribute

【发布时间】：2011-06-20 18:06:12

【问题描述】：

有没有办法在<input type=number> 上使用占位符？

【参考方案1】：

我刚刚检查了 html5 规范中类型为数字的输入，它明确表示占位符 attribute may not be used。当我尝试使用带有占位符属性的数字输入类型验证 html 时，http://validator.w3.org 也出现错误。看起来浏览器可能支持这一点，但它在 HTML5 规范中无效。

【讨论】：

不要认为这个说法已经成立了，最新的草稿已经加上了。 dev.w3.org/html5/spec/Overview.html#attr-input-placeholder（向上滚动一点看到黄色斑点的桌子）

【参考方案2】：

@zachleat 是正确的，placeholder 属性在最新的 HTML5 规范中是允许的：

HTML 5.1 2nd Edition: forms, number-state-typenumber（见记账部分）

以下常见的输入元素内容属性适用于该元素：autocomplete、list、max、min、placeholder、readonly、required 和 step 内容属性；

【参考方案3】：

这是 MDN 网络文档中关于 <input type="number"> 的占位符部分：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Placeholders

有时，提供有关输入数据应采用何种形式的上下文提示会很有帮助。如果页面设计没有为每个<input> 提供描述性标签，这一点尤其重要。这就是 placeholders 的用武之地。占位符是一个值，通过提供一个有效值的示例来演示 value 应该采用的值，当元素的 @987654325 时，该值显示在编辑框中@ 是 ""。输入数据后，占位符消失；如果盒子被清空，占位符会重新出现。

【参考方案4】：

使用占位符： <input type="number" placeholder="10">

使用最小值和最大值： <input type="number" placeholder="10">

使用价值： <input type="number" value="10">