The 'e' is the only letter that's accepted in a number field because it allows for exponents. You could use input type="text" but it doesn't give you the browser's native up and down arrows that type="number" does. And the pattern attribute validates on submission but doesn't stop someone from typing the 'e' in the first place. In REACT you can use this to completely block the 'e' key from being typed in a number input:

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

This should work:

const onNumberInputChange = useCallback(({ target: { value } }) => {
    if(!/\d*/.test(value)) return
    setFilteredValue(value);
    setUnfilteredValue(value);
  }, []);  const onNumerInputKeyDown = (event) => {
if(event.key === "e") event.preventDefault();

}

And if you update your number input to use this function on keyDown we should be able to stop the user from inputing e aswell

const onNumerInputKeyDown = (event) => {
    if(event.key === "e") event.preventDefault();
  }

Here the user will be able to delete their input completely and the user is prevented from using e.

Simply way in React

<input
      onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
        }
      }}
    />

Basic idea is:

Use controlled component (use value and onChange property of input field), and inside onChange handle check whether the entered value is proper number or not. Update the state only when entered value is a valid number.

For that use this regex: /^[0-9\b]+$/;

onChange handler will be:

onChange(e){
    const re = /^[0-9\b]+$/;

    // if value is not blank, then test the regex

    if (e.target.value === '' || re.test(e.target.value)) {
       this.setState({value: e.target.value})
    }
}

Working example:

class App extends React.Component{
   constructor(){
      super();
      this.state = {value: ''};
      this.onChange = this.onChange.bind(this)
   }
   
   onChange(e){
      const re = /^[0-9\b]+$/;
      if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({value: e.target.value})
      }
   }
   
   render(){
     return <input value={this.state.value} onChange={this.onChange}/>
   }
}

ReactDOM.render(<App/>,document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

• insert the following function in input type="number"

  <input type = "number" maxLength = "5" onInput={this.maxLengthCheck} />

• React function

   maxLengthCheck = (object) => {
   if (object.target.value.length > object.target.maxLength) {
    object.target.value = object.target.value.slice(0, object.target.maxLength)
     }
   }
  

You can match numbers 1 through 20 using the following regex:

/^([1-9]|1\d|20)$/

However, I suggest that you parse the number and just do a regular comparison instead, since that kind of regex is hard to read and hard to maintain, let alone configure during execution.

const value = Number(e.target.value);
const notTooSmall = value >= 1;
const notTooBig = value <= 20;
const inRange = notTooSmall && notTooBig;

This allows you to clamp the values in a more user-friendly manner. E.g. if the user copy-pastes 2019, you see it's too big and can put 20 instead.

Note: Using Number constructor does essentially the same thing as parseInt, except that empty string '' will yield 0, not NaN. In any case, you need to cover all possible inputs in your handler and respond in a user-friendly manner.

But – you may not need to do this at all.

HTML5 inputs have attributes min and max that instruct the browser to take care of this in the best way it can. That may not work in outdated browsers, but you cannot anyways rely on browser-side validation - that's just to make things easier for the user.

The e is the only letter that's accepted in a number field because it allows for exponents. You could use input type="text" but it doesn't give you the browser's native up and down arrows that type="number" does. And the pattern attribute validates on submission but doesn't stop someone from typing the 'e' in the first place. In React you can use this to completely block the 'e' key from being typed in a number input:

const [symbolsArr] = useState(["e", "E", "+", "-", "."]);
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => symbolsArr.includes(e.key) && e.preventDefault()}
      />
    </div>
  );

Codesandbox Demo

A simple solution which I used in React.

onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}

If you want to prevent certain keys from being pressed, you can surpress the keydown event after the check is failed:

<Input
  onKeyPress={(e) => {
    if (e.key === "e" || e.key === "-") {
      e.preventDefault();
    }
  }}
/>

But if you allow all keys but validate it after being pressed, you can use the pattern option like this:

<Controller
  name="phone"
  control={control}
  rules={{ required: true, pattern: /^\d+$/ }}
  render={(props) => {
    const { onChange, value, ref } = props.field; // v7. use props if you're using v6
    const { error } = props.meta;

    return (
      <Input
        ref={ref}
        type="number"
        label="phone"
        onChange={onChange}
        val={value}
      />
    );
  }}
/>