设置CSS输入字段的最小/最大值

Question

是否有一种方法可以根据CSS的ID设置HTML输入表单的最小/最大值?

Answer 1

你可以通过获取输入的DOM节点来做到这一点:每次输入失去焦点时，确定值是否在指定的范围内，如果不在，则纠正并提示

function change(){
const searchBox = document.getElementById("myInput");
if(searchBox.value>100){
searchBox.value=100
alert("the max value is 100")
}
if(searchBox.value<0){
searchBox.value=0
alert("the min value is 0")
}
}

<input type="text" value="" id="myInput" onBlur="change">

如果你想通过改变ID来改变样式:然后你可以首先通过类获得他的DOM，然后你可以根据DOM.id

强制修改他的id但不建议这样做

Answer 2

如果您的输入类型是number，您可以直接使用如下方式设置。

<input type="number" id="quantity" name="quantity" min="1" max="5">

您也可以从可以应用它的mdn清单中引用此文档。max到

几乎是一样的https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max