Question

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

说明产品的范围是：

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

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

Answer 1

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

这是一个小提琴示例：http://jsfiddle.net/maniator/qwFN6/

Answer 2

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

Answer 3

查找以下基于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>

设置文本框的最大值和最小值

3 个答案: