How do I restrict the input to only number at the input box?

Question

   <Form.Group>
              <Form.Control. onChange={e => { console.log('e------',e.target.value)}}
             type='number' />
   </Form.Group>

I set the type on can be number, but when I click "enter"(return button) and "-",

I still can see "e" and "-" at my input box, but I only want user see number at the inputbox.

Does this answer your question? [ReactJs prevent e and dot in an input type number](https://stackoverflow.com/questions/45834885/reactjs-prevent-e-and-dot-in-an-input-type-number) — SMAKSS, Aug 11 '20 at 19:08

score 2 · Answer 1 · answered Aug 11 '20 at 18:51

2

You can use this

<Form.Control type="number" onKeyDown={ (evt) => evt.key === 'e' && evt.preventDefault() } />

As per an existing answer to a similar question on stackoverflow

answered Aug 11 '20 at 18:51

DevLoverUmar

11,809
11
68
98

score 0 · Answer 2 · answered Aug 11 '20 at 18:47

0

You can try regex.

  <Form.Group>
       <Form.Control. 
          onChange={e =>  if(e.target.value.match("/^\d*(\.\d+)?$/")){
              console.log('e------',e.target.value)
          }}
       />
   </Form.Group>

answered Aug 11 '20 at 18:47

Qui-Gon Jinn

3,722
3
25
32

How do I restrict the input to only number at the input box?

2 Answers2