Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 (
      <span>+92</span>
      <input type='number' placeholder='Phone Number' maxLength={10} onChange={handleInput}/>
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.
                I would use a text field for a phone number. Often people want to put parenthesis, + or -, spaces...
– Alexis Wilke
                Feb 24, 2019 at 1:24
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
                Also I love the Mozilla docs, they are doing a really good job with it making it accessible (a.k.a. readable/understandable) to all... but it's not the official document. The official one is on w3c.
– Alexis Wilke
                Feb 24, 2019 at 1:23