javascript - html5 - 使用格式化占位符进行科学输入

Question

我正在创建一个 Web 应用程序，它需要将各种化学物质的百分比作为用户输入，例如(HCl[ Hydrochloric acid ]、NaOH [Sodium Hydroxide ] 等)。

所以这就是我在 HTML 中所做的事情:

<input type='text' value='' name='hcl' placeholder='Enter HCl%' />

这在大多数情况下都可以正常工作，但现在我的客户要求输入化学物质的百分比，例如 H₂SO₄、SiO₂ 等

所以这是我为此使用的:

<input type='text' placeholder='H<sub>2</sub>O' />

Fiddle

但没有成功。

---

那么现在我有一个问题:

我们如何格式化placeholders的 html input显示像这里提到的那样的格式化文本？

---

我知道这种情况的 可能的解决方案是:

使用 label在<input>之外它将在其中包含格式化的文本，例如:

<label for='h2o'>Enter H<sub>2</sub>O% :</label><input id='h2o' type='text' />

Fiddle而且我现在正在使用这种方法；

---

但我还是很想知道它也可以用占位符来完成吗？

使用 CSS 还是 CSS3？

如果不是那么用JS？

欢迎提出任何建议。

希望高手帮我解决这个问题。提前致谢:)!

Answer 1

您可以尝试使用 Unicode 字符表示 subscript numbers (“下标代码”部分):

<input type="text" placeholder="H&#8322;O" />

参见可用的子/上标表:http://en.wikipedia.org/wiki/Superscripts_and_Subscripts .

另一个选项(如果说某些浏览器不支持必要的字符)你总是可以使用带有文本的背景图像，并在 input:focus 上隐藏背景。