一、使用input屬性type限制輸入類型
在HTML中，input標籤有一個type屬性，可以用來限制用戶輸入的類型。如果我們想讓input輸入框只接受數字輸入，就可以將type屬性值設置為”number”。這樣，在用戶輸入時，瀏覽器會自動驗證輸入值是否為數字，如果不是純數字就會彈出警告框。以下是一個例子：
<input type="number" name="quantity">
二、使用JavaScript監聽輸入內容
如果我們想更細緻地控制用戶輸入的內容，比如只允許輸入整數或小數等，可以使用JavaScript。我們可以通過監聽輸入框的oninput事件，對用戶輸入的內容進行過濾，只保留符合要求的部分。
以下是一個限制只能輸入正整數的例子：
<input type="text" id="inputNumber">
<script>
const inputNumber = document.querySelector("#inputNumber");
inputNumber.addEventListener("input", function() {
let value = inputNumber.value;
value = value.replace(/[^\d]/g,""); //只保留數字
inputNumber.value = value;
});
</script>
三、使用CSS控制輸入框樣式
如果我們只是想控制輸入框樣式，讓用戶知道只能輸入數字，可以使用CSS樣式來修改輸入框外觀。比如可以設置邊框顏色、背景顏色等。
以下是一個設置輸入框樣式的例子：
<input type="text" id="inputNumber" class="number-input">
<style>
.number-input {
border: solid 1px #ddd;
background-color: #f6f6f6;
padding: 5px;
font-size: 16px;
}
.number-input:focus {
outline: none; //去掉輸入框聚焦時的虛線
border-color: blue;
}
</style>
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/193530.html
微信掃一掃 
支付寶掃一掃 