React: Input type number, maxLength not working? [duplicate]

Question

let say I'm trying to get 10 numbers in an Input field but maxLength property didn't work with type='number', although it works fine for type='text'.

import React, { Component } from 'react'
export default props => {
  const {
    handleInput
  } = props;

  return (
    <div>
      <span>+92</span>
      <input type='number' placeholder='Phone Number' maxLength={10} onChange={handleInput}/>
    </div>
  )
}

what im missing in above written code snippet?

One possible work around can be that I use the property of value in input tag and make the type of input as text and by writing an onChange function keep testing input value from Regular Expression.

Answer 1

This is a normal HTML element, nothing to do with React.

For input the type number is ignored, you should implement your own validation. According to the Mozilla document: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength