Question

我有此功能可以将字符串修改为类似USD的格式

function formatAmount(el){
  var val    = el.value;

  //Only Numbers
  val = val.replace(/[^0-9]/gi, '');

  // Pad with Zeros
  val = val.padStart(3,0);
  
  // Value with Period
  val = val.slice(0, -2) + '.' + val.slice(-2);
  
  // Append $
  val = '$' + val;
  
  console.log( val );
  //el.value = val; // Breaks??
}

<input type="text" onkeyup="formatAmount(this);" />

格式化值时，它可以正常工作：在输入中键入12345将记录$123.45。当我使用el.value = val;更改值时，该函数似乎有点怪异，而我还不太清楚为什么。现在，如果您快速键入12345，则返回$0123.45；如果您键入缓慢，则返回$00123.45。为什么在更改字段值时将0附加到字符串上，而在不更改的情况下将其记录在字符串后为什么不附加？

编辑：

基于@Dennis提到的内容，只要超时足够高，就可以将其包装在键入超时函数中。 10ms无效，但是100ms似乎有效？但是，这看起来并不优雅：

var formatTimeout = null;

function formatAmount(el){
    clearTimeout(formatTimeout);
    formatTimeout = setTimeout(function(){
        var val     = el.value;

        //Only Numbers
        val = val.replace(/[^0-9]/gi, '');

        // Pad with Zeros
        val = val.padStart(3,0);

        // Value with Period
        val = val.slice(0, -2) + '.' + val.slice(-2);

        // Append $
        val = '$' + val;

        //console.log( val );
        el.value = val; // Breaks??
    }, 100);
}

Answer 1

该功能在每次按键时触发。

如果您键入12345，它将被触发5次。如果输入速度足够慢，这就是您的值：

1, the function will change it to $0.01
2, it gets added at the end of the existing string to make it $0.012, which gets formatted by the function as $00.12
3, the initial string will be $00.123, and it will get formatted as $001.23.
...

最终结果将是$ 00123.45。

有几种方法可以解决此问题。最简单的解决方案是在填充零之前，先修剪掉开头的0，以保持数字干净。

Answer 2

console.log和实际分配值时结果之间的差异是因为formatAmount函数的输入每次都不同。

设置输入字段的值时，会发生这种情况；

-> User enter `1`
-> formatAmount takes the value, converts it to $0.01 and *sets the value* to the input box
-> user enter `2`
-> formatAmount takes the value ($0.012), converts it to $00.12 and *sets the value* to the input box

这一直持续到您完成12345并获得$ 00123.45为止。发生这种情况是因为键入首个0之后，您在开始时添加的两个1永远不会消失。

此外，console.log可以正常工作，因为每次接收到的值为1，12，... 12345。这些逻辑工作正常。仅当您将值重新设置为

时才会失败

Answer 3

使用javascript进行keyup操作似乎正常。经过各种速度的测试，就像魅力一样。另外，请尝试粘贴数字并使用正则表达式删除前导0，例如

var textInput = document.getElementById('hello');
textInput.onkeyup = function (e) {
    formatAmount(textInput.value);
};

function formatAmount(el){
  var val    = el;

  //Only Numbers
  val = val.replace(/[^0-9]/gi, '');

  // Pad with Zeros
  val = val.padStart(3,0);
  // replace leading 0's 
  val = val.replace(/^0+/, '');
  // Value with Period
  val = val.slice(0, -2) + '.' + val.slice(-2);
  
  // Append $
  val = '$' + val;
  
  textInput.value = val;
}

<input type="text" id="hello" />

Answer 4

仅显示使用Intl.NumberFormat.prototype.format()的替代起点。随时根据您的要求进行调整。

function formatAmount(el){
  el.value = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumIntegerDigits: 3 }).format(parseFloat(el.value.indexOf('$') === 0 ? el.value.substr(1) : el.value));
}

<input type="text" onblur="formatAmount(this);" />

Answer 5

我的猜测是您的函数同时被执行了多次，第一次执行甚至没有在下一次执行之前完成。您需要检查该功能是否已在运行。

设置格式化值中断功能

5 个答案: