带有货币符号的 HTML 文本输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2913236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML text input field with currency symbol
提问by User3419
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.
如果只接受数字输入我会很好，但这只是一个花哨的补充。
采纳答案by BalusC
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:
考虑使用带边框的跨度模拟具有固定前缀或后缀的输入字段。这是一个基本的开球示例：
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}<span class="currencyinput">$<input type="text" name="currency"></span>回答by rybo111
Use a parent .input-icondiv. Optionally add .input-icon-right.
使用父.input-icondiv。可选地添加.input-icon-right.
<div class="input-icon">
<input type="text">
<i>$</i>
</div>
<div class="input-icon input-icon-right">
<input type="text">
<i></i>
</div>
Align the icon vertically with transformand top, and set pointer-eventsto noneso that clicks focus on the input. Adjust the paddingand widthas appropriate:
将图标与transform和垂直对齐top，并设置pointer-events为none以便单击焦点在输入上。适当调整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;
}
Unlike the accepted answer, this will retain input validation highlighting, such as a red border when there's an error.
与接受的答案不同，这将保留输入验证突出显示，例如出现错误时的红色边框。
回答by Philipp Hofmann
You can wrap your input field into a span, which you position:relative;. Then you add with
:beforecontent:""your currency symbol and make it position:absolute. Working JSFiddle
您可以将输入字段包装到一个跨度中，您可以将其position:relative;. 然后你加上
:beforecontent:""你的货币符号并制作它position:absolute。工作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;
}
UpdateIf 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;
}
回答by Jeff Callahan
Since you can't do ::beforewith 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.
注意：代码必须全部在一行上。现代浏览器的支持非常好，但一定要测试。
回答by Andy
I ended up needing the type to still remain as a number, so used CSS to push the dollar sign into the input field using an absolute position.
我最终需要类型仍然保留为数字，因此使用 CSS 使用绝对位置将美元符号推入输入字段。
<div>
<span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
<input type="number" style="padding-left: 8px;">
</div>回答by dnagirl
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()（或其他）添加一些处理货币的客户端验证规则。这将允许您在输入字段中包含 '$'。但是您仍然必须为安全性进行服务器端验证，这使您重新回到必须删除“$”的位置。
回答by Sebastian
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">
<input class="currency" data-symbol="" type="number" value="12.9">
This way you don't need an extra tag and keep the symbol information in the markup.
这样您就不需要额外的标签并将符号信息保留在标记中。
回答by Quentin
$<input name="currency">
See also: Restricting input to textbox: allowing only numbers and decimal point
另请参阅：限制对文本框的输入：仅允许数字和小数点
回答by Sam Tuke
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:
这会导致此处左侧边栏的输入：
回答by DynamisDevelopment
I just used :before with the input and passed $ as the content
我刚刚使用 :before 与输入并通过 $ 作为内容
input{
margin-left: 20px;
}
input:before {
content: "$";
position: absolute;
}
