1

I'm trying to format numbers dynamically when user enters or changes an input string field. I'm using React and a library NumeralJS for number formatting. I also use react-jsonSchema-form and I override theirs' number field. I am stuck with the non-user-friendly way of moving the cursor either at the end or in the begging of the input value depending on if I change the thousands or the numbers after the decimal separator. Is there any proper solution for that?

For example (adding a number in the integer part the cursor is moved to the end of the number): enter image description here

ANSWER: I found a nice library for ReactJS which made the user interface friendly and it takes like 1 min to implement. I recommend it. https://github.com/s-yadav/react-number-format

elenaHristova
  • 611
  • 1
  • 8
  • 16
  • 3
    Can we have a fiddle or whatever showing your actual code ? – Nevosis Jul 10 '17 at 12:16
  • 1
    A thought: you need to have to variables one with the actual numerical value (what was typed in) and the other with formatted number as a string which you show to a user. You always update the numerical variable and parse it as a formatted string. To keep a cursor you can you javascript to remember previous position of a cursor and detect if it movers left, right or stays and then adjust accordingly. – Maciej Caputa Jul 10 '17 at 12:22
  • Thank you, @MaciejCaputa! The principle of how it works is the same as you described. I will have in mind the cursor settings for moving as you suggested. – elenaHristova Jul 10 '17 at 12:29

0 Answers0