Question

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

Answer 1

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

input type =“number”placeholder =“输入邮政编码”

Answer 2

由于您使用的是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}
      />
    );
  }
}

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

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

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

3 个答案: