How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc

Question

1. I want to limit the input type text field length to 6 (which means allow numbers only from 0 to 999999 range).

2. Even if it is of type number it allows entry of E, e, -, + . How to prevent this too.

I have tried setting the min=0, max=999999 and maxlength=6 etc but none of them worked for me. Given bellow my input field code in react.

              <TextField
                id="sampleFiled"
                label="VCode"
                type="number"
                required
                className="text-field"
                value={this.state.code}
                margin="normal"
              />

Answer 1

• 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)
     }
   }
  

Answer 2

isNaN() and Number can be combined to reject strings that don't evaluate to numbers.

See below for a practical example.

// Field.
class Field extends React.Component {
  
  // State.
  state = { value: '' }

  // Render.
  render = () => <input placeholder="Numbers only" value={this.state.value} onChange={this.handlechange}/>
  
  // Handle Change.
  handlechange = ({target: {value}}) => this.setState(state => value.length <= 6 && !isNaN(Number(value)) && {value} || state)

}

// Mount.
ReactDOM.render(<Field/>, document.querySelector('#root'))

<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="root"></div>