使用美元符号和逗号格式化货币输入字段

Posted 2023-05-08

【中文标题】使用美元符号和逗号格式化货币输入字段

【英文标题】：Format currency input field with dollar sign & commas

【发布时间】：2022-01-07 13:21:37

【问题描述】：

我有一个 javascript/jquery 表单中的收入输入字段：

需要一个美元符号：之前 货币增加时添加逗号

我有一个通过 css 显示的美元符号，但问题是居中并确保字段入口点在它旁边而不重叠。不确定如何使用逗号。欢迎任何建议或提示！

html：

  <form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
    <br>
  </form>

CSS：

  <style>
      .body 
        text-align: left;
      
      
      .fields 
        margin: 0 10px 0 0;
      
      
      .fields:before 
        content: "$";
        text-align: center;
        position: relative;
        left:30px;
      
      
      #price 
        border-radius: 5px;
        margin: 15px;
        padding: 10px;
        color: black;
      
    </style>

JS：

<script>
  $('#rev-calculator').on('click', 'button', function(e) 
    e.preventDefault();
    var price = $("#price").val();
    console.log(price);
  )
</script>

codepen：https://codepen.io/kedarPE/pen/JjroYyb

input field

【问题讨论】：

浏览器决定如何渲染输入的数字，不能添加逗号等文本。美元符号有什么问题？

也许看到这个逗号解决方法***.com/questions/49681785/…

【参考方案1】：

这里有一个方法，但实际上并不像我开始走这条路时所希望的那么简单。您可以使用Intl.NumberFormat 在其中获取逗号（根据语言环境）。为了容纳小数，我在开头嗅探它们并将它们附加到结果中。

为了允许使用逗号，我将其设为带有模式属性的文本字段。另外，我调整了你的 CSS，使它看起来更好看与 $

$('#price').keydown(function(e) 
  setTimeout(() => 
    let parts = $(this).val().split(".");
    let v = parts[0].replace(/\D/g, ""),
      dec = parts[1]
    let calc_num = Number((dec !== undefined ? v + "." + dec : v));
    // use this for numeric calculations
    console.log('number for calculations: ', calc_num);
    let n = new Intl.NumberFormat('en-EN').format(v);
    n = dec !== undefined ? n + "." + dec : n;
    $(this).val(n);
  )
)

.body 
  text-align: left;


.fields 
  margin: 0 10px 0 0;


.fields:before 
  content: "$";
  text-align: center;
  position: relative;
  left: 35px;


#price 
  border-radius: 5px;
  margin: 15px;
  padding: 10px 10px 10px 20px;
  color: black;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" />
    <br>
</form>

【讨论】：

谢谢，这很好用！现在唯一的问题是逗号会影响我的计算。如果你知道任何事情，必须找到一种方法在运行操作之前去掉逗号！

@Kedar - 查看修改后的答案，我把它放在那里。