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

Question

我正在创建一个WebApp,它需要将各种化学品的百分比(如[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' />

小提琴

但没有成功.

---

所以现在我有一个问题:

我们怎样才能格式placeholders的html input显示格式文本喜欢这里提到的一个？

---

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

label在<input>其外部使用将在其中包含格式化文本,如:

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

小提琴,我现在正在使用这种方法;

---

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

使用CSS还是CSS3？

如果不是那么使用JS？

欢迎任何建议.

希望专家将帮助我.提前致谢 :)!

Answer 1

您可以尝试使用Unicode字符作为下标数字("下标代码"部分):

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

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

另一种选择(如果说某些浏览器不支持必要的字符),您可以随时使用带有文本的背景图像,并隐藏背景input:focus.