当类型为文本时，将输入框限制为仅数字答案

【问题标题】：Restrict input box to only numbers when type is text当类型为文本时，将输入框限制为仅数字
【发布时间】：2018-06-17 23:37:03
【问题描述】：

当类型为文本时，我需要一个输入框，仅限制为数值。我看了一下这个答案，但它似乎不起作用。 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" />

【问题讨论】：

注意像这样改变条件： if ((event.charCode >= 48 && event.charCode = 96 && event.charCode

标签： html reactjs input

【解决方案1】：

由于您使用的是 React，您可以将 <input> 设为受控组件并决定何时更改状态：

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

我修改了条件以试图使意图更明显。

【讨论】：

【解决方案2】：

您可以在 HTML 中使用数字类型的输入标签。 HTML 支持标准数字输入类型。公式是这样的。

input type="number" placeholder="输入邮政编码"

【讨论】：

我没有使用数字类型，因为它在输入框上添加了增量箭头

【解决方案3】：

我已经在https://codepen.io/anon/pen/gooyEy 整理了另一种实现此目的的方法。

代码如下：

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

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

如果您正在寻找单线，也可以使用它：

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

【讨论】：