设置文本框的最大值和最小值 - Setting a maximum and minimum value for text box

Setting a maximum and minimum value for text box

本文关键字：最小值最大值置文本 | 更新日期: 2023-09-27

我拥有一个画布网站，希望我的客户能够在设定的范围内输入画布的自定义长度。

假设产品的范围是：

最小：10厘米
最大：200厘米

然后在文本框中，他们可以输入该范围内的任何数字，但如果他们输入"215"，则应自动降到"200"。同样，如果他们输入"7"，那么它应该自动上升到"10"

document.getElementById('textBoxID').onchange = function(){
      if(this.value > 200){
           this.value = 200;
      }
      if(this.value < 10){
           this.value = 10;
      }
}

下面是一个小提琴的例子：http://jsfiddle.net/maniator/qwFN6/

<input type="text"
    onchange="this.value = (this.value > 215) ? 215 : ((this.value < 10) ? 10 : this.value);">

在下面找到基于jQuery的代码

   <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <style>
    #customForm input.error{
        background: #f8dbdb;
        border-color: #e77776;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        //global vars
        var form = $("#customForm");    
        var canvas = $("#canvasID");
        var canvasInfo= $("#canvasInfo");
        //On blur   
        canvas.blur(validateCanvas);    
        //On Submitting
        form.submit(function(){
            if(validateCanvas())
                return true
            else
                return false;
        });
        function validateCanvas(){
            //if it's NOT valid
        if(canvas.val()< 10 || canvas.val()>200){
            if(canvas.val()< 10) {
                canvas.val('10');
            }
            if(canvas.val()>200) {
                canvas.val('200');
            }
                canvas.addClass("error");
                canvasInfo.text("We want canvas Minimum: 10 cm and Maximum: 200 cm");           
                return false;
            }
            //if it's valid
            else{       
                canvas.removeClass("error");
                canvasInfo.text("");
                return true;
            }
        }   
    });
 </script>