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

Posted 2023-04-18

【中文标题】当类型为文本时，将输入框限制为仅数字

【英文标题】：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

【参考方案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)"/>