前台数字输入框的格式化方法

目录

闲来无事，自己做了一个金额数字输入框的格式化。里面包含了，焦点在输入框里面的时候会自动去掉逗号，焦点移出输入框的时候，会自动加上逗号。支持输入小数和整数。小数输入的时候，如果小数点前面输入了【00.23】，会自动变成【0.23】。

画面控件代码

画面初始化的时候对控件进行js加载，方法有三个参数，具体解释如下：

<input type="text" name="quantity" id="quantity" data-format="number" value="3000"/>

画面初期化的时候绑定事件代码

画面初始化的时候对控件进行js加载，方法有三个参数，具体解释如下：
【参数1：控件ID】
【参数2：控件允许最大的输入长度】
【参数3：是否有小数】

// 画面绑定事件 
// 参数1：控件ID 
// 参数2：控件允许最大的输入长度 
// 参数3：是否有小数 
$utils.numberformat('#quantity',12,false);

引入实现格式化的共同脚本

  /**
   * 数字输入框的格式化方法。
   * @param 控件ID
   * @param 最大输入位数
   * @param 是否允许输入小数
   */
  $utils.numberformat = function (options,cd,dflg) {
    var _inpt = $(options);

    // 输入框的文字靠右显示: right
    _inpt.css("text-align","right");

    // 控制输入框的最大输入长度
    _inpt.attr({maxlength:cd});

    // 对画面初始化的数据进行编辑。
    editorVal(_inpt,dflg);

    // focus：绑定一个焦点获取事件
    _inpt.focus(function(){
    	var reg = new RegExp(",","g");
    	_inpt.val(_inpt.val().replace(reg,""));
    });

    // blur:绑定一个焦点失去事件。
    _inpt.blur(function(){
    	editorVal(_inpt,dflg);
    });

    // keyup：绑定一个键盘按下事件
    _inpt.keyup(function(){
    	if (dflg) {
    		_inpt.val(_inpt.val().replace(/[^\d.]/g,""));
    	}else{
    		_inpt.val(_inpt.val().replace(/[^\d]/g,""));
    	}
    });

    /**
     * 表示数据的编辑。
     * @param 控件ID
     * @param 是否允许输入小数
     */
    function editorVal(_inpt,dflg){
    	var arr;
    	var number;
        // 小数点存在的时候
    	if (dflg) {
    		var arr =  _inpt.val().split('.');

    		// 小数点存在的场合
    		var flag = true;
    		for (var i = 0; i < arr[0].length; i++) {
				var array_element = arr[0].charAt(i);
				if (array_element != "0") {
					flag = false;
				}
			}
            // 小数存在的场合
    		if (flag) {
    		    // 小数点前面都是0的时候。
    			number = 0;
			}else{
			    // 小数点前面不只有0的时候。
				number = arr[0].replace(/\b(0+)/gi,"");
			}
		}else{
        	number = _inpt.val().replace(/\b(0+)/gi,"");
		}
    	var _number = number.toString();
    	var result = '';
    	var counter = '';
    	for (var i = _number.length - 1; i >= 0; i--) {
    		counter++;
    		result = _number.charAt(i) + result;
    		if (!(counter % 3) && i != 0) {
    			result = ',' + result;
    		}
    	}
    	if (dflg) {
    		if (arr[1] != null) {
    			_inpt.val(result+"."+arr[1]);
    		}else{
    			_inpt.val(result);
    		}
    	}else{
    		_inpt.val(result);
    	}
    }
  };