带有最小/最大值的上/下按钮

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>