I need help building a JavaScript function that can parse and format percentages in real-time as users type in an input field. Here’s what I’m trying to achieve:
Convert decimal values to percentages (e.g., 0.5 to 50%)
Add the % symbol automatically
Handle whole numbers and decimals
Update the display as the user types
For example:
User types ‘1’ → Display shows ‘100%’
User types ‘.12’ → Display shows ‘12%’
User types ‘0.5’ → Display shows ‘50%’
I’ve tried using input event listeners and regular expressions, but I’m struggling to get it working smoothly. Any suggestions on how to implement this would be greatly appreciated. Thanks!
Hey alexj, I had a similar issue. try using parseFloat() to convert the input to a number, then multiply by 100 if it’s less than 1. use toFixed(2) to handle decimals, and add ‘%’ at the end. Don’t forget to handle NaN cases! lemme know if u need more help
I’ve actually implemented something similar for a financial dashboard project. Here’s what worked well for me:
Use an input event listener and a separate function to handle the formatting. In the function, first remove any non-numeric characters, then convert the input to a number. If it’s greater than 1, divide by 100. Then use toFixed(2) to limit decimal places and add the % symbol.
One tricky part was handling backspacing. I solved this by storing the raw input value separately and using that for calculations, while displaying the formatted version.
Also, consider edge cases like empty input or non-numeric entries. You might want to add some input validation to handle these gracefully.
Hope this helps point you in the right direction! Let me know if you need any clarification on the approach.
I’ve tackled this issue before in a project. Here’s a robust approach:
Use a combination of regex and number parsing. First, strip non-numeric characters with regex. Then, parse the value as a float. If it’s <= 1, multiply by 100. Use toFixed(2) for consistent decimals.
Key points:
Handle empty input (return ‘’)
Check for NaN after parsing
Use textContent instead of value for smoother updates
Debounce the input event for better performance
Remember to test thoroughly, especially with edge cases like ‘00’, ‘.’, and very large numbers.
This method worked well in production. Feel free to adapt it to your specific needs.