模拟购物车数量

在线调试

效果图

结构

<div class="count" data-count>
  <span class="sub" data-do="sub">-</span>
  <input type="text" value="1" data-max="100" data-result>
  <span class="add" data-do="add">+</span>
</div>

样式

*{
  margin: 0;
  padding: 0;
}
.count{
  width: 80px;
  text-align: center;
  background: #ddd;
  border: #ddd;
}
.count span{
  width: 20px;
  cursor: pointer;
}
.count input{
  width: 40px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}
input[type="number"]{-moz-appearance:textfield;}

逻辑

$(function(){
  $('[data-count]').on('click',function(e){
    var wodo = e.target.dataset.do;
    var result = $(this).find('[data-result]').val();
    var max = $(this).find('[data-result]').attr('data-max');
    if(wodo === 'sub'){
      result --;
      if(result < 1){
        result = 1;
      }
    }else if(wodo === 'add'){
      result ++;
      if(result > max){
        result = max;
      }
    }
    $(this).find('[data-result]').val(result);
  });
  $('[data-count] input').on('input property',function(e){
    var value = $(this).val();
    var max = $(this).attr('data-max');
    $(this).val(this.value.replace(/\D/g,''));
    if(!value || value < 1){
     $(this).val(1);
    }
    if(Number(value) > Number(max)){
      $(this).val(max);
    }
  });
});

如果要使用type为number的话，有下面的小坑。
移除input中type为number的右侧小尖头

1. 谷歌浏览器

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

2. 火狐浏览器

input[type="number"]{-moz-appearance:textfield;}

3. 使用type为tel来替换