javascript - How do I make Mui textfield type number only accept number ? Currently it accept numbers,"e" and

admin管理员组

文章数量:1434914

This is my current code.

<TextField error={values[1].error} fullWidth id="id" type="number" value={values[1].Id} placeholder='Enter ID' onChange={handleChange(1,'Id')} variant="outlined" inputProps={{min: 0,inputMode: 'numeric', pattern: '[0-9]'}} onBlur={() => handleOnBlurEvent(1,'Id')} />
                   

This is my current code.

<TextField error={values[1].error} fullWidth id="id" type="number" value={values[1].Id} placeholder='Enter ID' onChange={handleChange(1,'Id')} variant="outlined" inputProps={{min: 0,inputMode: 'numeric', pattern: '[0-9]'}} onBlur={() => handleOnBlurEvent(1,'Id')} />
                   

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Aug 4, 2022 at 8:07 tosseftossef 1111 gold badge11 silver badge22 bronze badges 3

• 2 E.g. -1e2 is a valid number. – jonrsharpe Commented Aug 4, 2022 at 8:12
• thats becoz e is for exponential, if you want to restrict it then probably you need to have a custom validation using keyup or keydown – Amaarockz Commented Aug 4, 2022 at 8:12
• can you please suggest any documentation to restrict e and dashes? – tossef Commented Aug 4, 2022 at 8:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

As mentioned by jonrsharpe, numbers containing - or e are still valid numbers.

If you still want to limit the changes that are being accepted, you can make use of a custom handleNumberChange function that filters chars such as e, E and -.

const handleNumberChange = (id: number, key: string, value: string) => {
  if (["e", "E", "-"].some((char) => value.includes(char))) return;

  // handle change here
};

You would use it like that in your MUI <TextField/>:

<TextField
  ...
  onChange={(e) => handleNumberChange(1, "Id", e.target.value)}
/>

本文标签：