如何使我的输入仅限于最多 10 个数字并且不允许任何字符？

Question

我希望能够为输入的电话号码设置最大长度，并且也不允许任何字符。但是，对于下面的格式，它确实限制该人输入 10 个字符，但它也允许添加任何其他字符。

现在，如果我将 type 更改为 type="number" maxLength 将不起作用，并且 [minus(-) 或 plus(+)] 等字符仍将通过。

如何使我的输入仅限于最多 10 个数字并且不允许任何字符？

<input
  placeholder="Telephone Number"
  className="input_fields telephone_no"
  type="tel"
  maxLength={"10"}
  name="phoneNumber"
  id="teacher_telephone_no"
  value={this.state.user.phoneNumber}
  onChange={e =>
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value
      }
    })
  }
/>

Answer 1

您可以在设置状态之前使用regex 测试您的输入，如：

     <input
        placeholder="Telephone Number"
        className="input_fields telephone_no"
        type="tel"
        maxLength={"10"}
        name="phoneNumber"
        id="teacher_telephone_no"
        value={user}
        onChange={(e) => {
          if (/^[0-9]{1,10}$/.test(e.target.value)) {
             this.setState({
               user: {
               ...this.state.user,
               [e.target.name]: e.target.value
               }
            })
          }
        }}
      />

Answer 2

您可以使用正则表达式和keyup 事件来防止符号输入。

let input = document.querySelector('input')
input.onkeyup = function() {
  input.value = input.value.replace(/[^\d]/, "")

}

<input placeholder="Telephone Number" className="input_fields telephone_no" type="tel" maxLength={ "10"} name="phoneNumber" id="teacher_telephone_no" />