0

I am having difficulty updating an input fields value to currency while a user types. When I use the input event change I am able to successfully update the value to currency. But when I use keyup event the input value and interaction behavior is not very user friendly.

I tried using a setTimeout but I can't achieve the value/currency formatting as the user types correctly.

Any advice or suggestions would be greatly appreciated.

Example:

myInputElement.addEventListener('keyup', function (e) {
 e.currentTarget.value = numeral(e.currentTarget.value).format('$0,0.00');
});
Galactic Ranger
  • 851
  • 3
  • 14
  • 30

2 Answers2

1

make decimals optional.

numeral(e.currentTarget.value).format('$0,0.[00]');
Ercan Peker
  • 1,662
  • 10
  • 17
  • Thanks Ercan that is an improvement but the format that I need is $80.00 when I use .format('$0,0.[00]') it does not format the value correctly – Galactic Ranger Oct 11 '18 at 21:10
0

Try the "input" eventListener. This will fire every time a new character is input.

var myInputElement = document.getElementById("element");

myInputElement.addEventListener("input", function (e) {
  e.currentTarget.value = numeral(e.currentTarget.value).format('$0,0.00');
});
S--
  • 368
  • 1
  • 12