Restrict input box to only numbers when type is text

Question

I need to have an input box to be only restricted to numeric values when the type is text. I took a look at this answer, but it does not seem to work. HTML text input allows only numeric input

<input type="text" onKeyPress={(event) => {
    if (event.charCode >= 48 && event.charCode <= 57 || event.charCode >= 96 && event.charCode <= 105) {
        return true;
    } else {
        return false;
    }
  }}
  className="form-control"
  maxLength="5"
  ref="zip"
  placeholder="Enter Zip Code" />

Care to change the condition like this: if ((event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 96 && event.charCode <= 105)) { return true; } Look at that extra parentheses — kidz, Jan 08 '18 at 23:54

silvenon · Accepted Answer · 2018-01-12T13:26:47.963

Since you're using React, you can make <input> a controlled component and decide when you want to change the state:

class ZipCodeInput extends React.Component {
  state = {
    value: ""
  }

  render() {
    return (
      <input
        type="text"
        onChange={(event) => {
          if (isNaN(Number(event.target.value))) {
            return;
          } else {
            this.setState({ value: event.target.value });
          }
        }}
        maxLength="5"
        placeholder="Enter Zip Code"
        value={this.state.value}
      />
    );
  }
}

I modified the condition in an attempt to make the intention more obvious.

Mikhail Zharnikov · Answer 2 · 2018-01-09T00:00:57.087

1

You can use number type of input tag in HTML. HTML supports the standard number input type. The formula is like this.

input type="number" placeholder="Enter Zip Code"

edited Jan 09 '18 at 00:00

answered Jan 08 '18 at 23:55

Mikhail Zharnikov

178
1
13

I am not using number type since it adds the incremental arrows on the input box – henhen Jan 09 '18 at 00:00

score 1 · Answer 3 · answered Jan 09 '18 at 00:33

I've put together an alternative way of accomplishing this at https://codepen.io/anon/pen/gooyEy.

The code is as follows:

<input
  type="text"
  autofocus
  onkeypress="return onlyNumbers(event)"/>

const onlyNumbers = (event) => {
  return !isNaN(event.key);
}

You can also use this if you're looking for a one-liner:

<input
  type="text"
  onkeypress="return !isNaN(event.key)"/>

Restrict input box to only numbers when type is text

3 Answers3