11

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.

Mubeen Khan
  • 997
  • 1
  • 10
  • 11

1 Answers1

3

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

davychhouk
  • 1,549
  • 2
  • 16
  • 20
  • 1
    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 '19 at 01:23
  • My bad. Official document of Mozilla to be precise. – davychhouk Feb 24 '19 at 01:25