一、使用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/n/193530.html
微信扫一扫 
支付宝扫一扫 