我希望能夠為輸入的電話號碼設定最大長度，并且也不允許任何字符。但是，使用下面的格式，它確實限制了一個人輸入 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
}
})
}
/>
uj5u.com熱心網友回復：
您可以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
}
})
}
}}
/>
uj5u.com熱心網友回復：
您可以使用正則運算式和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" />轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410086.html
標籤：
下一篇：暗模式鏈接對比HTML/CSS