Numberbox组件
2018-09-13 本文已影响0人
zhanggongzi
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number</title>
</head>
<body>
<input id="number-textbox" min="1" max="100000" precision="2" toChinese='money' >
<script type="text/javascript">
(function(window){
function Numberbox(obj){
this.el = document.getElementById(obj.el);
if(!this.el) return;
var defaults = {
disabled: false,
toChinese:null,
min: null,
max: null,
precision: 0,
setThousandChar:true,
onChange:function(value){},
onKeyup:function(){},
onBlur:function(){}
};
var options = {
disabled: (this.el.getAttribute('disabled') ? true : undefined),
min: (this.el.getAttribute('min')=='0' ? 0 : parseFloat(this.el.getAttribute('min')) || undefined),
max: (this.el.getAttribute('max')=='0' ? 0 : parseFloat(this.el.getAttribute('max')) || undefined),
precision: (parseInt(this.el.getAttribute('precision')) || undefined)
}
this.options = extend(defaults,options);
this.options = extend(this.options,obj);
var self = this;
this.el.onkeyup = function(){
var opts = self.options;
var num = this.value;
if(num.indexOf(',')>0) num =num.replace(/,/g,'');
if (isNaN(num)){
this.value = '';
return;
}
if (opts.min != null && opts.min != undefined && num < opts.min){
this.value = opts.min.toFixed(opts.precision);
} else if (opts.max != null && opts.max != undefined && num > opts.max){
this.value = opts.max.toFixed(opts.precision);
} else {
this.value = String(opts.setThousandChar)=="true"?formatNumber(num):num;
}
if(opts.toChinese=='number'){
toChineseNumber(parseFloat(num),this);
}else if(opts.toChinese=='money'){
toChineseMoney(parseFloat(num),this);
}
}
this.el.onkeypress = function(e){
if (e.which == 45){ //-
return true;
} if (e.which == 46) { //.
return true;
}
else if ((e.which >= 48 && e.which <= 57 && e.ctrlKey == false && e.shiftKey == false) || e.which == 0 || e.which == 8) {
return true;
} else if (e.ctrlKey == true && (e.which == 99 || e.which == 118)) {
return true;
} else {
return false;
}
}
this.el.onblur = function(){
self.fixValue();
}
this.el.onpaste = function(e){
if (window.clipboardData) {
var s = clipboardData.getData('text');
if (/^[\d\.\,]*$/.test(s)) {
return true;
} else {
return false;
}
} else {
var clipboardData = e.originalEvent ? e.originalEvent.clipboardData : e.clipboardData || null;
var val = clipboardData.getData('text') || "";
//val = val.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,'');
if (/^[\d\.\,]*$/.test(val)){
return true;
}else{
return false;
}
}
}
this.el.ondragenter =function(){
return false;
}
}
function extend(obj){
var obj2 = Array.prototype.slice.call(arguments, 1)[0];
if(obj2){
for(var key in obj2){
obj[key] = obj2[key];
}
}
return obj;
}
function formatNumber(num,precision){
if(!/^(\+|-)?(\d+)(,\d{3})*(\.|\.\d+)?$/.test(num)){
return num;
}
var a = RegExp.$1,b = RegExp.$2,c = RegExp.$4;
var re = /(\d)(\d{3})(,|$)/;
while(re.test(b)){
b = b.replace(re,"$1,$2$3");
}
return precision == null ? a +""+ b +""+ c : a +""+ b +""+ c.toFixed(precision);
}
function toChineseMoney(n, obj) {
var MAX = 9999999999999.99;
if(n>MAX) ret="数据过大！";
else if (!/^(0|[1-9]\d*)(\.\d*)?$/.test(n)){
ret = "";
}else{
var unit = "万仟佰拾亿仟佰拾万仟佰拾元角分",
str = "";
n += "00";
var p = n.indexOf('.');
if (p >= 0) n = n.substring(0, p) + n.substr(p + 1, 2);
unit = unit.substr(unit.length - n.length);
for (var i = 0; i < n.length; i++) str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
if(str=='零元零角零分') {
ret = '零元';
}
else{
var ret = str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万/g, "$1").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
}
//ret += "(转译小数点后两位)";
}
// if (obj) {
// $(obj).closest('td').width('auto'); // 在IE7下需要将父td结点的宽度变成auto，才能保证转译成中文的字符显示在同一行。 @author 朱庭乐
// var $span = $(obj).next("span");
// if($span.hasClass("validatebox-must")){
// $span.next("span.to-chinese").remove();
// if(ret)
// $span.after("<span class='to-chinese' style='color:red;font:14px 宋体;'><b>" + ret + "</b></span>");
// }else{
// $span.remove();
// if(ret)
// $(obj).after("<span class='to-chinese' style='color:red;font:14px 宋体;'><b>" + ret + "</b></span>");
// }
// }
console.log(ret);
return ret;
}
function toChineseNumber(n, obj) {
var MAX = 9999999999999.99;
if(n>MAX) ret="数据过大！";
else if (!/^(0|[1-9]\d*)(\.\d*)?$/.test(n)){
ret = "";
}else{
var unit = "万仟佰拾亿仟佰拾万仟佰拾点",
str = "";
n += "00";
var p = n.indexOf('.');
if (p >= 0) n = n.substring(0, p) + n.substr(p + 1, 2);
unit = unit.substr(unit.length - n.length+2);
for (var i = 0; i < n.length; i++) str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
if(str=='零点零零') {
ret = '零';
}else{
var ret = str.replace(/点零零/g, "").replace(/零(仟|佰|拾)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿)/g, "$1").replace(/(亿)万/g, "$1").replace(/零$/g, "");
}
//ret += "(转译小数点后两位)";
}
console.log(ret);
return ret;
}
Numberbox.prototype = {
setDisabled:function(flag){
var self = this;
if(flag){
this.el.setAttribute('disabled',true);
this.options.disabled = true;
this.el.style.backgroundColor = '#ccc';
}else{
this.el.removeAttribute('disabled');
this.options.disabled = false;
this.el.style.backgroundColor = '#fff';
}
},
fixValue :function(){
var self = this;
var opts = self.options;
var num = self.el.value;
if(num.indexOf(',')>0) num =num.replace(/,/g,'');
var val = num.indexOf('.') > 0 ? parseFloat(num).toFixed(opts.precision) : parseFloat(num);
if (isNaN(val)){
//$(target).val('').siblings("span.to-chinese").remove();
return;
}
if (opts.min != null && opts.min != undefined && val < opts.min){
self.el.value = opts.min.toFixed(opts.precision);
} else if (opts.max != null && opts.max != undefined && val > opts.max){
self.el.value = opts.max.toFixed(opts.precision);
} else {
////是否设置千位符 addby fengqf@20140108
self.el.value = String(opts.setThousandChar)=="true"?formatNumber(val):val;
}
if(opts.toChinese=='number'){
toChineseNumber(parseFloat(val),self.el);
}else if(opts.toChinese=='money'){
toChineseMoney(parseFloat(val),self.el);
}
}
}
window.Numberbox = Numberbox;
})(window)
</script>
<script type="text/javascript">
var a = new Numberbox({
//容器
el:'number-textbox',
//当前页码
disabled:'true',
toChinese:'money'
});
</script>
</body>
</html>
