美文网首页
Numberbox组件

Numberbox组件

作者: zhanggongzi | 来源:发表于2018-09-13 17:28 被阅读0次

    <!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>

    相关文章

      网友评论

          本文标题:Numberbox组件

          本文链接:https://www.haomeiwen.com/subject/dpcggftx.html