如何使我的輸入僅限於最多 10 個數字並且不允許任何字符？

Question

我希望能夠為輸入的電話號碼設置最大長度，並且也不允許任何字符。 但是，使用下面的格式，它確實限制了一個人輸入 10 個字符，但它也允許添加任何其他字符。

現在，如果我將type更改為type="number" maxLength 將不起作用，並且 [minus(-) 或 plus(+)] 等字符仍將通過 go。

如何使我的輸入僅限於最多 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

您可以使用正則表達式和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" />

Answer 2

在設置 state 之前，您可以使用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
               }
            })
          }
        }}
      />