input数字输入框的格式化
- 目录
-
- 画面控件代码
- 画面初期化的时候绑定事件代码
- 引入实现格式化的共同脚本
目录
闲来无事,自己做了一个金额数字输入框的格式化。里面包含了,焦点在输入框里面的时候会自动去掉逗号,焦点移出输入框的时候,会自动加上逗号。支持输入小数和整数。小数输入的时候,如果小数点前面输入了【00.23】,会自动变成【0.23】。
画面控件代码
画面初始化的时候对控件进行js加载,方法有三个参数,具体解释如下:
画面初期化的时候绑定事件代码
画面初始化的时候对控件进行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);
}
}
};