效果图
结构
<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的右侧小尖头
- 谷歌浏览器
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
- 火狐浏览器
input[type="number"]{-moz-appearance:textfield;}
- 使用type为tel来替换
