0

I need a helper function in javascript to change an input value from a plain number to one with a % and 2 decimal places. For example:

enter 2 change to 2.00% enter 0.5 change to 0.50% enter 1.5 change to 1.50%

is there a simple way to accomplish this? I had a quick fix to simply append a % to the value:

interestInput.addEventListener("change", () => {
interestInput.value = `${interestInput.value}%`;
});
bradmeyn
  • 47
  • 3
  • 2
    You tried something right? Please post your code attempt. – Louys Patrice Bessette Nov 16 '20 at 20:36
  • I've added what I had which was a quick fix. I'm a beginner so I thought there may be a common way to do this. – bradmeyn Nov 16 '20 at 21:01
  • Common way is to use input field mask. You can find modules for this. Note that when you changing input as user types in you may break UX like value editing. See https://css-tricks.com/input-masking/ for modules example. – x'ES Nov 16 '20 at 21:47
  • Does this answer your question? [How to format numbers as percentage values in JavaScript?](https://stackoverflow.com/questions/45163256/how-to-format-numbers-as-percentage-values-in-javascript) – Heretic Monkey Nov 16 '20 at 22:14

1 Answers1

1

So that is what you have:

let interestInput = document.querySelector("#interestInput")

interestInput.addEventListener("change", () => {
  interestInput.value = `${interestInput.value}%`;
});
Interest: <input id="interestInput">

You are using the change event, which occurs when the user leaves the input field. That is just adding the % sign...

So if you want the user to type in a percentage (a number with 2 decimal places) on "keypress" (I suggest the keyup event), that you be something like (see comments within the code):

let interestInput = document.querySelector("#interestInput")

interestInput.addEventListener("keyup", function() {
  
  // Just for this demo... 
  console.clear()
  
  // Get the input value
  let value = this.value
  console.log(value)
  
  // Maybe it already is formatted with a decimal point and a %
  // so remove the dot and %, then parse as an integer
  let number = parseInt(value.replace(/[\.\%]/g,""))
  console.log(number)
  
  // Divide by 100
  let percentage = number/100
  console.log(percentage)

  // change the input's value
  interestInput.value = `${percentage}%`;
});
Interest: <input id="interestInput">

The same thing shortened in a one-liner:

let interestInput = document.querySelector("#interestInput")

interestInput.addEventListener("keyup", function() {
  this.value = parseInt(this.value.replace(/[\.\%]/g, "")) / 100 + "%";
});
Interest: <input id="interestInput">

About this /[\.\%]/g weird part, you can read about Regular Expressions and play with Regex101

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • Thanks for responding. Another comment had a link to some other solutions: parseFloat(x).toFixed(2)+"%") was one example, another recommended using the number.toLocalString() method. My next question would be is there a reason to do one solution over the others? – bradmeyn Nov 17 '20 at 21:51