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

Question

有没有一种方法可以在type为number的input标签中显示占位符文本？

详细问题： HTML中input标签的'placeholder'属性用于在元素未被聚焦时在UI中显示有关输入标签的描述 - 当相同字段获得焦点时，描述性文本会变为空白。问题是如果输入类型为type="number"，则不会显示任何文本。我的UI空间有限，无法在输入标签之前放置标签。

有什么建议吗？

- amandeepsingh bajwa

---

从规范中可以得知：placeholder属性表示一个短提示（单词或短语），旨在帮助用户进行数据输入。提示可以是示例值或对预期格式的简要描述。 它不能替代<label>。 - Quentin

占位符文本在IE浏览器中似乎无法正常工作。 - mnsr

Answer 1

占位符并不是用来作为输入标签的。占位符应该包含有效输入示例。因此，对于数字输入，占位符的唯一有效值是数字。

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

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

PS Chrome Nightly似乎没有将数字和占位符组合在一起的问题。

- Gerben

---

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

不再起作用，但有其他解决方法，例如在具有“position:relative”的容器内放置一个带有“position:absolute”的元素和一个“input”元素。 - oldboy

我甚至不知道inputmode是什么。它也有相当广泛的支持。 - oldboy

@BugWhisperer，您能告诉我它在哪个浏览器上无法工作吗？我刚刚测试了带有占位符的输入框和我的“onfocus”技巧，它们在IE11、Chrome和Firefox中都可以正常工作。 - Gerben