Label 与 MaterialUI 数字文本输入字段值重叠

Question

I have this Material UI Text Input Field

<TextField
  label="Numeric"
  inputProps={{ inputMode: "numeric", pattern: "[0-9]+" }}
  type="number"
  variant="standard"
/>

When I type the letter "e" in the Text Input Field:

1. Is taking the letter "e" as a valid value I can type within the Text Input Field
2. The label overlaps the value

Reproduce error: https://codesandbox.io/s/basictextfields-demo-material-ui-forked-m14u7i?file=/demo.js

Answer 1

e is allowed because you can specify large numbers with it. you can prevent any character by regex. this is my solution to prevent user to type e

  function preventNonNumericalInput(e) {
    e = e || window.event;
    var charCode = typeof e.which == 'undefined' ? e.keyCode : e.which;
    var charStr = String.fromCharCode(charCode); 
    var pattern = new RegExp(/^[0-9\b]+$/);
    if ( !pattern.test(charStr)) e.preventDefault();
  }

you can add this function to onkeypress

    onKeyPress={e => preventNonNumericalInput(e)}