CODEWITHSUNDEEP
reactjstextfield
Praveen George
Praveen George

Reputation: 9725

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

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

Upvotes: 13

Views: 58255

Answers (5)

Engin &#220;lger
Engin &#220;lger

Reputation: 11

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

Upvotes: 0

Shivani
Shivani

Reputation: 63

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

Upvotes: -1

Codemaker2015
Codemaker2015

Reputation: 15708

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

Upvotes: 0

Mahesh Gajera
Mahesh Gajera

Reputation: 301

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

Upvotes: 17

Arman Charan
Arman Charan

Reputation: 5797

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>

Upvotes: 5

Related Questions