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' />

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

您可以尝试为subscript numbers使用Unicode字符（“下标代码”部分）：

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

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

另一个选项（如果某些浏览器不支持必要的字符）您可以随时将背景图片与文字一起使用，并隐藏input:focus上的背景。

Answer 2

您可以使用css这样的

设置整个占位符的样式

/*For Webkit browsers (Chrome, Safari) */

input::-webkit-input-placeholder {
    /* Your style here e.g. font size, color etc */  
}

/* For Mozilla Firefox */

input:-moz-placeholder {
    /* Your style here e.g. font size, color etc */
}

您还可以使用以下选项设置部分样式：选择器之后和之前

//for wbkit browsers
::-webkit-input-placeholder:after {
     content: '*';
}

::-webkit-input-placeholder:before {
     content: '*';
}

//similarly for moz browsers

另一种方法是使用@dfsq

建议的UTF字符

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

2 个答案: