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

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

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

Answer 1

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

.currencyinput { border: 1px inset #ccc; } .currencyinput input { border: 0; } 

 <span class="currencyinput">$<input type="text" name="currency"></span> 

Answer 2

使用父级.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> 

将图标与transform和top垂直alignment，并将pointer-events设置为none这样点击就会集中在input上。 根据需要调整padding和width ：

 .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使用示例

Answer 3

你可以把你的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; } 

Answer 4

由于你不能做::before的content: '$'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; } 

它输出以下内容：

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

Answer 5

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

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

Answer 6

如果你只需要支持Safari，你可以这样做：

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

和一个input字段

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

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

Answer 7

  $<input name="currency"> 

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

Answer 8

我更喜欢的另一种解决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

Answer 9

它的作品自举

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

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

Answer 10

 .currencyinput { border: 1px inset #ccc; padding-bottom: 1px;//FOR IE & Chrome } .currencyinput input { border: 0; } 

 <span class="currencyinput">$<input type="text" name="currency"></span>