帶有最小/最大值的向上/向下按鈕

Question

我對jQuery/Javascript非常新，我使用這個微調。我不想使用任何插件。但我想問我怎麼能給一個最大值。和分鐘。例如min.value 0和max.value的值13.輸入「number」在IE中不起作用，因爲我沒有使用它。 這裏是演示

http://jsfiddle.net/xg228/75/

<form> 
    <table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td rowspan="2"><input type="text" name="number" value="1" style=" width: 50px; height:20px;    border:1px solid #dddddd ;" /></td> 
     <td><input type="button" value=" /\ " id="Up" onclick="this.form.number.value++;"></td> 
     </tr> 
     <tr> 
     <td><input type=button value=" \/ " id="Down" onclick="this.form.number.value--;" ></td> 
     </tr> 
     </table> 
      </form> 

    #Up 
    { 
    font-size:7px; 
width:20px; 
height:12px; 
float:right; 
    margin-right:52px; 
    background-color:#dddddd; 
    border:none; 
    border-bottom: 1px solid #bababa;" 
    } 

    #Up:hover 
{ 
    background-color: #bababa; 

    } 

    #Up:active { 
    outline: none; 
    border: none; 
    } 

    #Up:focus {outline:0;} 

    #Down 
    { 
    font-size:7px; 
width:20px; 
height:12px; 
float:right; 
margin-right:52px; 
background-color:#dddddd; 
border:none; 
border-bottom: 1px solid #bababa;" 
    } 

    #Down:hover 
{ 
    background-color: #bababa; 

    } 

    #Down:active { 
outline: none; 
    border: none; 
    } 

    #Down:focus {outline:0;} 

    #Up:hover 
    { 
    background-color: #bababa; 

} 

Answer 1

隨着一點點的jQuery代碼，這是可以實現的。

我已經在Javascript中設置了min和max值，並且我已經刪除了HTML中的onclick處理程序。

該代碼已經在IE11中測試過。

Updated jsFiddle

工作代碼段：

編輯：禁用文本框，以防止用戶進入無效值。

var min = 0, 
 
    max = 13; 
 

 
$("#Up").click(function(){ 
 
    if($("#input").val() < max && $("#input").val() >= min) 
 
    $("#input").val(Number($("#input").val()) + 1); // increment 
 
}); 
 

 
$("#Down").click(function(){ 
 
    if($("#input").val() <= max && $("#input").val() > min) 
 
    $("#input").val(Number($("#input").val()) - 1); // decrement 
 
});

#Up 
 
{ 
 
    font-size:7px; 
 
    width:20px; 
 
    height:12px; 
 
    float:right; 
 
    margin-right:52px; 
 
    background-color:#dddddd; 
 
    border:none; 
 
    border-bottom: 1px solid #bababa;" 
 
} 
 

 
#Up:hover 
 
{ 
 
    background-color: #bababa; 
 

 
} 
 

 
#Up:active { 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
#Up:focus {outline:0;} 
 

 
#Down 
 
{ 
 
    font-size:7px; 
 
    width:20px; 
 
    height:12px; 
 
    float:right; 
 
    margin-right:52px; 
 
    background-color:#dddddd; 
 
    border:none; 
 
    border-bottom: 1px solid #bababa;" 
 
} 
 

 
#Down:hover 
 
{ 
 
    background-color: #bababa; 
 

 
} 
 

 
#Down:active { 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
#Down:focus {outline:0;} 
 

 
#Up:hover 
 
{ 
 
    background-color: #bababa; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table cellpadding="0" cellspacing="0" border="0"> 
 
    <tr> 
 
     <td rowspan="2"><input type="text" name="number" value="1" style=" width: 50px; height:20px; border:1px solid #dddddd ;" id="input" disabled /></td> 
 
     <td><input type="button" value=" /\ " id="Up" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type=button value=" \/ " id="Down" /></td> 
 
    </tr> 
 
    </table> 
 
</form>