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

I would like to have a text input field containing the "$" sign in the very beginning, and no matter what editing occurs to the field, for the sign to be persistent.

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

I would be good if only numbers were accepted for input, but that's just a fancy addition.

如果只接受数字作为输入，那就太好了，但这只是一个花哨的加法。

11 个解决方案

#1

Consider simulating an input field with a fixed prefix or suffix using a span with a border around a borderless input field. Here's a basic kickoff example:

考虑使用带边框的span来模拟一个带固定前缀或后缀的输入字段。这里有一个基本的例子:

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

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

#2

Use a parent .input-icon div. Optionally add .input-icon-right.

使用父.input-icon div。可选地添加.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>

Align the icon vertically with transform and top, and set pointer-events to none so that clicks focus on the input. Adjust the padding and width as appropriate:

将图标垂直对齐到transform和top，并将指针事件设置为none，以便单击输入。根据需要调整填充和宽度:

.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;
}

Unlike the accepted answer, this will retain input validation highlighting, such as a red border when there's an error.

与已接受的答案不同，这将保留输入验证突出显示，例如当出现错误时，将保留红色边框。

JSFiddle usage example with Bootstrap and Font Awesome

JSFiddle是Bootstrap和Font Awesome的用法示例

#3

You can wrap your input field into a span, which you position:relative;. Then you add with :before content:"€" your currency symbol and make it position:absolute. Working JSFiddle

您可以将输入字段封装到一个span中，并将其定位为:relative;。然后你添加:在内容:“€”你的货币符号,让它位置:绝对的。工作JSFiddle

HTML

HTML

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

CSS

CSS

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

Update If you want to put the euro symbol either on the left or the right side of the text box. Working JSFiddle

如果您想要将欧元符号放在文本框的左边或右边，请更新。工作JSFiddle

HTML

HTML

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

CSS

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;
 }

#4

Since you can't do ::before with content: '$' on inputs and adding an absolutely positioned element adds extra html - I like do to a background SVG inline css.

由于您不能使用::before和content: $在输入和添加一个绝对定位的元素添加额外的html -我喜欢对背景SVG内联css做。

It goes something like this:

大概是这样的:

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;
}

It outputs the following:

它输出如下:

Note: the code must all be on a single line. Support is pretty good in modern browsers, but be sure to test.

注意:代码必须都在一行上。支持在现代浏览器中是很好的，但是一定要测试。

#5

Put the '$' in front of the text input field, instead of inside it. It makes validation for numeric data a lot easier because you don't have to parse out the '$' after submit.

将“$”放在文本输入字段前面，而不是在其中。它使得对数字数据的验证变得更加容易，因为您不必在提交后解析“$”。

You can, with JQuery.validate() (or other), add some client-side validation rules that handle currency. That would allow you to have the '$' inside the input field. But you still have to do server-side validation for security and that puts you back in the position of having to remove the '$'.

您可以使用JQuery.validate()(或其他)添加一些处理货币的客户端验证规则。这将允许您在输入字段中包含“$”。但是您仍然需要为安全性进行服务器端验证，这将使您回到必须删除“$”的位置。

#6

 $<input name="currency">

See also: Restricting input to textbox: allowing only numbers and decimal point

参见:将输入限制为文本框:只允许数字和小数点

#7

If you only need to support Safari, you can do it like this:

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

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

and an input field like

一个输入域

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

<输入类=“货币”data-symbol =“€”类型="数量" value=" 12.9 ">

This way you don't need an extra tag and keep the symbol information in the markup.

这样，您就不需要额外的标记并将符号信息保存在标记中。

#8

Another solution which I prefer is to use an additional input element for an image of the currency symbol. Here's an example using an image of a magnifying glass within a search text field:

我喜欢的另一个解决方案是为货币符号的图像使用一个额外的输入元素。这里有一个在搜索文本框中使用放大镜图像的例子:

html:

html:

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

css:

css:

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

This results in the input on the left sidebar here:

这导致了左侧边栏的输入:

https://fsfe.org

https://fsfe.org

#9

For bootstrap its works

引导其工作

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

Don't use class="form-control" in input field.

在输入字段中不要使用class="form-control"。

#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>

#11

None of these answers really help if you are concerned with aligning the left border with other text fields on an input form.

如果您关心的是将左边框与输入表单中的其他文本字段对齐，这些答案都没有真正的帮助。

I'd recommend positioning the dollar sign absolutely to the left about -10px or left 5px (depending whether you want it inside or outside the input box). The inside solution requires direction:rtl on the input css.

我建议把美元符号完全放在左边-10px或者左边5px(取决于你想让它在输入框里面还是外面)。内部解决方案需要方向:输入css的rtl。

You could also add padding to the input to avoid the direction:rtl, but that will alter the width of the input container to not match the other containers of the same width.

您还可以向输入添加填充，以避免方向:rtl，但是这会改变输入容器的宽度，使其与其他相同宽度的容器不匹配。

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

or

或

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

https://i.imgur.com/ajrU0T9.png

https://i.imgur.com/ajrU0T9.png

Example: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

例如:https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview