如何在 HTML5 的数字输入中显示占位符的文本

Posted 2023-03-05

【中文标题】如何在 HTML5 的数字输入中显示占位符的文本

【英文标题】：How to display placeholder's text in HTML5's number-typed input

【发布时间】：2011-11-16 02:53:52

【问题描述】：

有没有办法在 type=number 的输入标签内显示占位符文本？

详细问： html 输入标记的“占位符”属性用于在元素未获得焦点时在 UI 中显示有关输入标记的描述 - 当同一字段获得焦点时，描述性文本变为空白。如果输入类型由 type="number" 组成，则问题是看不到任何文本。我的 UI 确实有空间限制，无法在输入标签之前添加标签。

有什么建议吗？

【问题讨论】：

来自the spec: 占位符属性代表一个简短的提示（一个词或短语），旨在帮助用户输入数据。提示可以是示例值或预期格式的简要说明。 它不能替代 <label>。

占位符文本在 IE 浏览器中似乎不起作用

【参考方案1】：

占位符不用作输入标签。占位符应包含有效输入的示例。因此，在输入数字的情况下，占位符的唯一有效值是数字。

但是，如果您想滥用占位符来节省空间，您可以使用一点 JS 来解决您的问题。

<input placeholder="Amount" onfocus="this.type='number';">

PS Chrome Nightly 似乎没有结合数字和占位符的问题。

【讨论】：

@BugWhisperer 如果你只想让手机显示数字键盘，也可以使用inputmode="decimal"。

不再有效，但还有其他解决方法，例如将带有 position:absolute 的元素放在带有 position:relative 和 input 元素的容器中

我什至不知道inputmode。它也有相当广泛的支持。

@BugWhisperer 你能告诉它在哪个浏览器上不起作用。我刚刚使用占位符和onfocus 技巧测试了输入，两者似乎都可以在 IE11、Chrome 和 Firefox 中正常工作。