最近刚有个数字输入框浮点数输入、加减的需求。
查询社区只有http://ask.dcloud.net.cn/article/477这一篇文章的建议是替换源码中parseInt为parseFloat,
但觉得这个方法并不完全解决js中浮点数相加结果异常的问题。
于是对mui.js中的numberbox部分进行适当修改,实现任意浮点数、整数加减的需求。
代码如下,可直接复制粘贴到mui.js8024行处进行替换:
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = 'mui-numbox';
var plusClassSelector = '.mui-btn-numbox-plus,.mui-numbox-btn-plus';
var minusClassSelector = '.mui-btn-numbox-minus,.mui-numbox-btn-minus';
var inputClassSelector = '.mui-input-numbox,.mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
options = options || {};
options.step = parseFloat(options.step || 1);
self.options = options;
self.input = $.qsa(inputClassSelector, self.holder)[0];
self.plus = $.qsa(plusClassSelector, self.holder)[0];
self.minus = $.qsa(minusClassSelector, self.holder)[0];
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
var add = function(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return ((arg1*m+arg2*m)/m).toFixed(n);
};
var sub = function(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
};
self.plus.addEventListener(tapEventName, function(event) {
var val = add(parseFloat(self.input.value),self.options.step);
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = sub(parseFloat(self.input.value),self.options.step);
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
var val = self.input.value;
self.checkValue();
//触发顶层容器
$.trigger(self.holder, changeEventName, {
value: val
});
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseFloat(self.input.value);
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseFloat(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
},
/**
* 动态设置新值
**/
setValue: function(value) {
this.input.value = value;
this.checkValue();
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) {
return;
}
if (options) {
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
element.numbox = new Numbox(element, options);
}
});
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui));
0 个评论
要回复文章请先登录或注册