Question

我需要在一个显示支付总金额的框中添加一个美元符号，但我不希望该美元符号包含在“value”标记中。这就是我现在所拥有的。

<input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly>

Answer 1

创建一个样式为文本框的容器
在此容器内添加两个内联元素：
- 用于存放货币符号的范围
- 用于保存值的输入文本框
将输入元素设置为没有边框。

这将创建带有货币符号的文本框的错觉。该符号不可编辑。

Answer 2

正如所写，问题的答案是＆＃34;你不能＆＃34;。如果您希望<input>元素显示＆＃34; $ 1.00＆＃34;，＆＃34; $＆＃34;将需要成为value属性的一部分。

现在，有人说，有办法做你想做的事情，主要是使用Javascript来管理输入元素的值。

例如，您可以添加事件处理程序来处理各种状态下的值。

当使用值＆＃34; 1＆＃34;初始化输入元素时，添加一些Javascript以获取＆＃34; 1＆＃34;并将其格式化为＆＃34; $ 1.00＆＃34;
当用户点击输入元素元素（或其中的标签）开始编辑时，使用onFocus处理程序去除＆＃34; $＆＃34;签名，以便用户正在编辑＆＃34; 1.00＆＃34;
当用户点击其他地方（或输入元素中的标签）时，使用onBlur处理程序将值重新格式化为＆＃34; $ 1.00＆＃34;

这是一个非常简单示例，根据您的需要，可能是您想要的，也可能不是。我们当然可以为onFocus，onChange，onKeyUp/onKeyDown和onBlur处理程序编写Javascript处理程序来保留＃34; $＆＃34;在编辑期间在那里，但这会复杂得多。

Answer 3

使用Css可以实现这一目标。

HTML

<div class="text">input type="number" class="total" id="totalpaying" name="totalpaying" value="<% total %>" readonly></div>

的CSS

<style>
div.text{
position:relative;
padding-left: 20px;
}

div.text:after{
position: absolute;
    left: 6px;
    top: 2px;
    content: '$';
}
</style>

以下是代码https://jsfiddle.net/12efgo6t/1/

如何在没有包含在值中的情况下将美元符号添加到字段

3 个答案: