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"
              />

In case you haven't seen it, this question and solutions of it may help your case: https://stackoverflow.com/questions/45834885/reactjs-prevent-e-and-dot-in-an-input-type-number . Not for (+,-) exactly but for E or e. — vahdet, Mar 23 '18 at 06:55
@vahdet Yeah, I have seen it, but the code looks a bit complex for me and I wonder what if there is a much more simpler solution to bring this basic HTML 5 property into react code. — Praveen George, Mar 23 '18 at 06:58
How about using html attribute with type text then? Like: `type="text" pattern="[0-9]*"` — vahdet, Mar 23 '18 at 07:07

score 15 · Answer 1 · edited Apr 23 '19 at 13:00

15

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

edited Apr 23 '19 at 13:00

Agilanbu

2,747
2
28
33

answered Apr 23 '19 at 12:19

Mahesh Gajera

181
1
5

Arman Charan · Answer 2 · 2018-03-24T00:30:21.770

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>

score 0 · Answer 3 · answered Aug 21 '20 at 14:01

0

You can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

You can also specify the min value of the range

 <input type="number" min="1" max="999" />

answered Aug 21 '20 at 14:01

Codemaker2015

12,190
6
97
81

2

I don't think React respects the max setting on a number input. – TwisterMc Jan 04 '21 at 17:08
I tried and it works in my project. That's why I posted it here – Codemaker2015 Jan 05 '21 at 11:50
@TwisterMc is right, if `type="number"`, this will not work -- Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input – ChumiestBucket Sep 01 '22 at 22:24

Engin Ülger · Answer 4 · 2022-09-29T15:01:24.007

import { useState } from 'react';
import { Container, Row, Col, Form, Button } from "react-bootstrap";

function Identity() {


    const [num, setNum] = useState('');

    const limit = 6;
    const handleNumChange = event => {
        setNum(event.target.value.slice(0, limit));
    };

    return (
        <Container className="px-5 py-5" style={{ margin: "0 auto" }}>
            <Row>
                <Col lg="2"></Col>
                <Col lg="8">
                    <Form>
                        <Form.Group className="mb-3" controlId="formBasicEmail">
                            <Form.Label>Number length control</Form.Label>
                            <Form.Control
                                type="number"
                                value={num}
                                onChange={handleNumChange}
                                placeholder="Number input"
                            />
                            <Form.Text className="text-muted">
                                When you enter a 5 digit number, the button will be active.
                            </Form.Text>
                        </Form.Group>

                        <Button variant="primary" type="submit" disabled={!num.slice(limit - 1)}>
                            Start
                        </Button>

                    </Form>
                </Col>
                <Col lg="2"></Col>

            </Row>
        </Container>
    )
}

export default Identity

score -1 · Answer 5 · edited Feb 06 '22 at 04:01

-1

You can make use of inputProps to set min and max length. like

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

edited Feb 06 '22 at 04:01

Joundill

6,828
12
36
50

answered Jan 31 '22 at 08:25

Shivani

57
1
9

2

This isn't working for me – Salman Ullah Khan Mar 08 '22 at 06:22

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

5 Answers5