Javascript中货币屏蔽期间的额外数字答案

【问题标题】：Extra Number during Currency Masking in JavascriptJavascript中货币屏蔽期间的额外数字
【发布时间】：2019-08-21 18:54:44
【问题描述】：

我正在尝试在不使用 jquery 插件的情况下创建一个快速的货币屏蔽功能。我所在的环境是使用requirejs，任何添加插件的尝试通常都会导致这个问题：

MISMATCHED ANONYMOUS DEFINE() MODULES

无论如何，下面是我的代码，我试图去掉小数点后的第 3 位数字，以便小数点后只有 2 位数字，但我终生无法弄清楚为什么我什么都没做正在让它消失。

currencyMask("#test");

function currencyMask(fieldID) {
  $(fieldID).on('keypress click', function() {
    if (this.value != '') {
      if (this.value.length == 1) {
        this.value = '0' + this.value
      }
      
      this.value = parseFloat(this.value.replace(/[^\d]/g, '').replace(/(\d\d?)$/, '.$1')).toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,').replace(/(\d{2})(\d$)/, '$1');
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id='test'>

【问题讨论】：

所以，嗯.. 这个面具实际上应该做什么？
它应该将输入的数字屏蔽为货币。这样当您开始输入 100000 时，它会在您输入时自动将数字格式化为 1,000.00
改用keyup。
让整个事情变得奇怪的是，当您的代码对输入进行任何操作时，您正在最后一个位置输入，因为您完全替换了该值。
@KevinB，我对其进行了修改，使其从头开始而不是结束。 if (this.value != '' && this.value.length >= 3) { this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{2}$)/, '.$1').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); } 是不是更容易理解？此外，您的“keyup”评论解决了这个问题，虽然我不完全确定为什么。

标签： javascript jquery currency masking

【解决方案1】：

经过一些讨论、一些测试和一些研究。我稍微更改了代码并解决了Kevin B 提到的关于keyup 与keypress 的问题。

经过一些研究，似乎keypress 在“按下键”时触发，而 keyup 在“释放键”时触发。 -W3 Schools

因此，我选择了keyup。

另外，Kevin B说：

让整个事情变得奇怪的是，当您的代码对输入进行任何操作时，您正在最后一个位置输入，因为您完全替换了该值。

所以我更改了代码，以便用户在开头而不是结尾键入。他还提到：

无论您如何更改该值，如果您在输入仍然聚焦的情况下更改它，它会影响输入的可用性，因为它会以一种或另一种方式更改插入点。我更喜欢事后改变它，而不是为了不干扰用户的输入而生活。例如，关于模糊。

这里的这部分绝对是偏好。刚才我把一个管理员带到我的办公桌前，问他们更喜欢哪一个。他们中的大多数人不喜欢事后改变的人。他们觉得这很混乱，对他们来说，货币掩码的全部意义在于在输入时清楚地看到他们正在输入的内容。

需要明确的是，没有“错误”的方法可以做到这一点。您可以改为使用.blur，这也可以。这更多地是关于我们的特定用户喜欢什么。

下面是我的更新代码：

currencyMask("#test");

function currencyMask(fieldID) {
  $(fieldID).keyup(function() {
    if (this.value != '' && this.value.length >= 3) {
     this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{2}$)/, '.$1').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id='test'>

【讨论】：