点击加减或手动改变表单值(支持键盘控制)的jQuery插件
大多电子商务网站购物车页面,都有通过点击来增减商品数量的功能,特地根据常规功能写了一个jQuery插件。
实现的功能:
1、可通过点击增加或减小定义的input值;
2、可手动输入input值,且支持键盘控制:上右为加,下左为减;
3、可设定表单的最大最小值,并对input值进行了非负整数判断;
4、定义了回调函数,输出表单最后的input值和所改变input的索引值。也可在插件中稍稍修改一下,把想返回的值传到一个hidden input中;
$.fn.iVaryVal=function(iSet,CallBack){
/*
* Minus:点击元素--减小
* Add:点击元素--增加
* Input:表单元素
* Min:表单的最小值,非负整数
* Max:表单的最大值,正整数
*/
iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
var C=null,O=null;
//插件返回值
var $CB={};
//增加
iSet.Add.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
//输出当前改变后的值
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
});
});
//减少
iSet.Minus.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
});
});
//手动
iSet.Input.bind({
'click':function(){
O=parseInt($(this).val());
$(this).select();
},
'keyup':function(e){
if($(this).val()!=''){
C=parseInt($(this).val());
//非负整数判断
if(/^[1-9]\d*|0$/.test(C)){
$(this).val(C);
O=C;
}else{
$(this).val(O);
}
}
//键盘控制:上右--加,下左--减
if(e.keyCode==38 || e.keyCode==39){
iSet.Add.eq(iSet.Input.index(this)).click();
}
if(e.keyCode==37 || e.keyCode==40){
iSet.Minus.eq(iSet.Input.index(this)).click();
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
},
'blur':function(){
$(this).trigger('keyup');
if($(this).val()==''){
$(this).val(O);
}
//判断输入值是否超出最大最小值
if(iSet.Max){
if(O>iSet.Max){
$(this).val(iSet.Max);
}
}
if(O<iSet.Min){
$(this).val(iSet.Min);
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
}
});
} 相关推荐
开心就好 2020-06-10
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26