Allow only numbers in Input in React (antd styling)

Question

I know type=number works but that is not what i want. my HTML:

<FormItem style={{ display: "inline-block" }}>
    {getFieldDecorator('matchPercentage', {
        initialValue: this.state.matchPercentage
     })( 
        <Input type="number" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} />
     )}
</FormItem>

my Function:

handlePercentMatch = (e) => {
    const isInteger = /^[0-9]+$/;
    if (e.target.value === '' || isInteger.test(e.target.value)) {
      this.setState({ matchPercentage: e.target.value })
    }
  }

My isInteger.test() is working meaning I am able to get only integers in matchPercentage in state. But the problem is It is not reflecting in GUI. I am still able to type alphabets even though they are not being set into state.

I know type="number" works but that is not what i want. I want to validate using react as i want control decimals and upto how many digits and non negative

I have added my code here https://codepen.io/DadyByte/pen/xYgLvy?editors=1010

I found the root cause. If you use FormItem you will be allowed to type no matter what. If I use Input outside FormItem my code is working. What can I do to prevent it

its a huge form component @Prakashsharma. What could be the problem? — DadyByte
– DadyByte, Commented Feb 8, 2018 at 17:43
@DadyByte just make sure, inside Input component you defined value={this.props.value} on input element, if you define that it will work, otherwise it will allow user to add any value. Check this answer — Mayank Shukla
– Mayank Shukla, Commented Feb 8, 2018 at 17:48
@DadyByte Nothing seems wrong with the above logic. I think there is something wrong with Input component itself. — Prakash Sharma
– Prakash Sharma, Commented Feb 8, 2018 at 17:48
Maybe you are missing a e.preventDefault() in case the if condition does not pass. — keul
– keul, Commented Feb 8, 2018 at 17:51

Konstantinos Gallis · Accepted Answer · 2022-12-21 07:03:51Z

8

Just use the code below and it would just accept the numbers, also it works for ant design Input component.

<input
    onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
            event.preventDefault();
        }
    }}
/>

edited Dec 21, 2022 at 7:03

Konstantinos Gallis

1,1909 silver badges17 bronze badges

answered Dec 19, 2022 at 12:31

Soheil Bakhtyari

2413 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rman__ Over a year ago

Although its a clever stateless method it prevents user from copy pasting its value to the input

Adam Mańkowski Over a year ago

Alternative of using onKeyPress, which is marked as deprecated is using onKeyDown.

Sulung Nugroho · Accepted Answer · 2019-09-16 09:54:56Z

6

The simplest and far from complicated way according to www.w3schools.com :

onHandleChangeNumeric = e => {
 let valu = e.target.value;

 if (!Number(valu)) {
 return;
 }

 this.setState({ [e.target.name]: valu });
};

On render input :

 <input
   type="text"
   className="form-control"
   name="someName"
   value={this.state.someName}
   onChange={this.onHandleChangeNumeric}
    />

Impoertant : Do not make type="number", it won't work.

answered Sep 16, 2019 at 9:54

Sulung Nugroho

1,75320 silver badges15 bronze badges

2 Comments

KMC Over a year ago

it's simple ..but once user filled out, they won't be able to delete/backspace the last number. They'll be left with single number in the field..

KMC Over a year ago

To fix that, replace "if (!Number(valu)) {...}" with "if (!Number(valu)&& valu.length > 0) {..}"

herlarby · Accepted Answer · 2019-10-27 07:22:59Z

6

Ant Design has an InputNumber Component. You could use something like this

import {InputNumber} from 'antd';

Usage

<InputNumber placeholder="Age (Max Age :100,  Min Age:1)" size={'large'} min={1} max={100} onChange={this.handleAgeChange} />

Then your handleAgeChange Functionality could look like

 handleAgeChange = (value) => {
    this.setState((prevState) => (
         { ...prevState, age:value }
    ));
};

answered Oct 27, 2019 at 7:22

herlarby

1112 silver badges4 bronze badges

Comments

Max Millington · Accepted Answer · 2018-02-08 17:45:07Z

2

HTML 5 has a native solution:

<input type="number">

This is assuming your Input component is using the HTML5 <input /> tag

answered Feb 8, 2018 at 17:45

Max Millington

4,4935 gold badges32 silver badges34 bronze badges

1 Comment

Twitter khuong291 Over a year ago

But I can still type "-".

Hadnazzar · Accepted Answer · 2018-09-13 11:30:56Z

2

I assume you use that for telephone number input.

So here is the input you can use.

<input
   placeholder="Telephone Number"
   onChange={ (e) => {
     const telNo = e.target.value;
     const re = /^[0-9\b]+$/;
     if (telNo === '' || re.test(telNo)) {
       this.setState({ telNo: e.target.value });
     }
   }
   value={ this.state.telNo }
   type="tel"
 />

answered Sep 13, 2018 at 11:30

Hadnazzar

1,61620 silver badges22 bronze badges

Comments

Muneeb · Accepted Answer · 2018-02-08 17:44:22Z

1

Well, it's quite simple just pass type = number to your input field<input value={this.state.matchPercentage} onChange={this.handlePercentMatch} type="number">

answered Feb 8, 2018 at 17:44

Muneeb

1,57916 silver badges24 bronze badges

Comments

DSDmark · Accepted Answer · 2022-12-19 12:40:48Z

Hi @DadyByte,

Set the pattern attribute to prevent the user from entering non-integer values in the input field.

<input type="text" pattern="\d*" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} />

The expression \d* matches any number of digits (0 or more). This will allow only integer values to be entered into the input field.

Alternatively, you could also use /^[0-9]+$/.

handlePercentMatch = (e) => {
  const isInteger = /^[0-9]+$/;
  if (e.target.value === '' || isInteger.test(e.target.value)) {
    this.setState({ matchPercentage: e.target.value }, () => {
      e.target.setSelectionRange(e.target.value.length, e.target.value.length);
    });
  }
}

Teo · Accepted Answer · 2025-03-25 17:01:55Z

0

Another solution is to set the onInput property in the <Input/> component. This allows typing only numbers and provides the advantage of using properties like minLength and maxLength to restrict the length of the possible input values.

<Input
    value={this.state.matchPercentage}
    onInput={(e) => {
        // Only allow numbers
        e.currentTarget.value = e.currentTarget.value.replace(
            /^[0-9]+$/,
            "",
        );
    }}
    style={{ width: 100, marginLeft: 10 }}
/>

answered Mar 25 at 17:01

Teo

413 bronze badges

Collectives™ on Stack Overflow

Allow only numbers in Input in React (antd styling)

8 Answers 8

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Hi @DadyByte,

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Hi @DadyByte,

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related