将值设置为 <input type="number" /> 中的货币

Posted 2023-04-18

【中文标题】将值设置为 <input type="number" /> 中的货币

【英文标题】：Set value to currency in <input type="number" />

【发布时间】：2013-01-17 00:56:01

【问题描述】：

我正在尝试使用 javascript 将用户输入的数字格式化为货币。这在<input type="text" /> 上运行良好。但是，在<input type="number" /> 上，我似乎无法将值设置为包含非数字值的任何值。以下小提琴显示了我的问题

http://jsfiddle.net/2wEe6/72/

我是否可以将值设置为$125.00 之类的值？

我想使用<input type="number" />，以便移动设备知道要调出键盘来输入数字。

【问题讨论】：

不能只显示控件前面的$吗？或者你想让用户控制他们想要输入的货币吗？在后一种情况下，恐怕只有type="text" 符合条件。

@MrLister 这是一个非常好的观点。这可能就是我最终会做的事情。

如果您想允许用户更改货币类型但仍要进行type="number"，您可以使用带有各种货币符号的选择框。请注意，许多国家/地区将货币符号放在数字之后而不是之前。

已链接 - html5 input for money/currency

【参考方案1】：

将step="0.01" 添加到<input type="number" /> 参数中：

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

演示：http://jsfiddle.net/uzbjve2u/

但是美元符号必须留在文本框之外...每个非数字或分隔符都会被自动裁剪。

否则，您可以使用经典文本框，like described here。

【讨论】：

不是 OP 要求的...如果 value="25.6" 这将显示...它应该显示 "25.60"

HTML5 specs/implementations of this are buggy@patrick。除了hackish, browsers-dependant solutions，你想要的东西是不可能的，但是它在 Firefox 上不起作用。我已经编辑了小提琴顺便说一句，因为 Globalize.format 函数现在在 FF 中完全破坏了它，所以我想我应该感谢你的反馈:)

@AndreaLigios 您描述为经典文本框的链接正是我在为文本框设置货币格式时所寻找的。我不得不做出一些改变，但这是一个很好的开始。

min 在这里没有意义。我可以轻松设置负值

@Green 我在 Firefox 上，但我不能。然而，那是特定于浏览器实现的，最后，我相信你理解the difference between client-side and server-side validation。我不确定反对票的真正含义，但感谢您的反馈。

【参考方案2】：

最后，我制作了一个 jQuery 插件，它将为我适当地格式化 <input type="number" />。我还注意到，在某些移动设备上，min 和 max 属性实际上并不会阻止您输入比指定更低或更高的数字，因此插件也会考虑这一点。下面是代码和示例：

(function($) 
  $.fn.currencyInput = function() 
    this.each(function() 
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() 
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      );
    );
  ;
)(jQuery);

$(document).ready(function() 
  $('input.currency').currencyInput();
);

.currency 
  padding-left:12px;


.currency-symbol 
  position:absolute;
  padding: 2px 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

【参考方案3】：

你们是完全正确的数字只能进入数字字段。我使用与已经列出的完全相同的东西，在 span 标签上添加了一些 css 样式：

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

然后添加一点样式魔法：

span
  position:relative;
  margin-right:-20px

input[type='number']
  padding-left:20px;
  text-align:left;

【讨论】：

这很干净。唯一的问题是单击货币符号不会集中输入。

这是一个简单的 javascript 问题。单击 span 上的事件以聚焦输入

…或者你可以只使用<label> 标签，这在语义上也很有价值（而且你不需要JS）。

【参考方案4】：

您似乎需要两个字段，一个用于货币的选择列表和一个用于值的数字字段。

在这种情况下，一种常见的技术是使用 div 或 span 进行显示（屏幕外的表单字段），然后单击切换到表单元素进行编辑。

【讨论】：

这是一个比让用户输入货币更好的选择。

抱歉，这里给出的 jQuery 示例和 Dojo 中的 CurrencyTextBox 提供了比两个字段更易于管理的输入和验证方法。除了在移动设备上，因为您必须使用文本键盘。具有讽刺意味的是，在我的 iPad 上，type="number" 包括我所在地区的货币符号 £。 HTML 确实需要赶上并提供一些可以切换到适当的货币键盘的东西。

【参考方案5】：

当类型设置为“数字”时，浏览器只允许输入数字。 Details here.

您可以使用 type="text" 并使用 JavaScript like descripted here 过滤掉除数字输入之外的任何输入