带有货币符号的HTML文本input字段

我希望有一个文本input字段在开始时包含“$”符号,并且无论该字段发生了什么编辑,该符号都是持久的。

如果只有数字被接受,我会好的,但这只是一个奇特的补充。

考虑使用具有无边界input字段边界的跨度来模拟具有固定前缀或后缀的input字段。 这是一个基本的开球的例子:

.currencyinput { border: 1px inset #ccc; } .currencyinput input { border: 0; } 
 <span class="currencyinput">$<input type="text" name="currency"></span> 

使用父级.input-icon div。 可以select添加.input-icon-right

 <div class="input-icon"> <i>$</i> <input type="text"> </div> <div class="input-icon input-icon-right"> <i>€</i> <input type="text"> </div> 

将图标与transformtop垂直alignment,并将pointer-events设置为none这样点击就会集中在input上。 根据需要调整paddingwidth

 .input-icon { position: relative; } .input-icon > i { position: absolute; display: block; transform: translate(0, -50%); top: 50%; pointer-events: none; width: 25px; text-align: center; font-style: normal; } .input-icon > input { padding-left: 25px; padding-right: 0; } .input-icon-right > i { right: 0; } .input-icon-right > input { padding-left: 0; padding-right: 25px; text-align: right; } 

与接受的答案不同,这将保留inputvalidation突出显示,例如出现错误时显示红色边框。

带有Bootstrap和Font Awesome的JSFiddle使用示例

你可以把你的input字段换成一个span,你的position:relative; 。 然后:before content:"€" :before添加content:"€"您的货币符号,并使其position:absolute 。 使用JSFiddle

HTML

 <span class="input-symbol-euro"> <input type="text" /> </span> 

CSS

 .input-symbol-euro { position: relative; } .input-symbol-euro input { padding-left:18px; } .input-symbol-euro:before { position: absolute; top: 0; content:"€"; left: 5px; } 

更新如果您想将欧元符号放在文本框的左侧或右侧。 使用JSFiddle

HTML

 <span class="input-euro left"> <input type="text" /> </span> <span class="input-euro right"> <input type="text" /> </span> 

CSS

  .input-euro { position: relative; } .input-euro.left input { padding-left:18px; } .input-euro.right input { padding-right:18px; text-align:end; } .input-euro:before { position: absolute; top: 0; content:"€"; } .input-euro.left:before { left: 5px; } .input-euro.right:before { right: 5px; } 

由于你不能做::beforecontent: '$'inputcontent: '$'和添加一个绝对定位的元素添加额外的HTML – 我喜欢做背景SVG内联CSS。

它是这样的:

 input { width: 85px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>"); padding-left: 12px; } 

它输出以下内容:

svg美元符号背景css

注意:代码必须全部在一行上。 在现代浏览器中支持相当不错,但一定要testing。

将“$”放在文本input字段的前面,而不是放在里面。 它使数字数据的validation更容易,因为您不必在提交之后parsing出“$”。

您可以使用JQuery.validate() (或其他)添加一些处理货币的客户端validation规则。 这将允许您在input字段中包含“$”。 但是,您仍然需要对安全性进行服务器端validation,并使您重新获得删除“$”的位置。

如果你只需要支持Safari,你可以这样做:

 input.currency:before { content: attr(data-symbol); float: left; color: #aaa; } 

和一个input字段

<input class="currency" data-symbol="€" type="number" value="12.9">

这样你就不需要额外的标签,并将标志信息保存在标记中。

  $<input name="currency"> 

另请参见:将input限制为文本框:仅允许数字和小数点

我更喜欢的另一种解决scheme是使用一个额外的input元素作为货币符号的图像。 以下是在search文本字段中使用放大镜图像的示例:

HTML:

 <input type="image" alt="Subscribe" src="/graphics/icons/search-button.png"> <input type="text" placeholder="Search" name="query"> 

CSS:

 #search input[type="image"] { background-color: transparent; border: 0 none; margin-top: 10px; vertical-align: middle; margin: 5px 0 0 5px; position: absolute; } 

这将导致在这里左侧的input:

https://fsfe.org

它的作品自举

 <span class="form-control">$ <input type="text"/></span> 

在input字段中不要使用class =“form-control”。

 .currencyinput { border: 1px inset #ccc; padding-bottom: 1px;//FOR IE & Chrome } .currencyinput input { border: 0; } 
 <span class="currencyinput">$<input type="text" name="currency"></span>