js金额浮点格式化控件

偶第一次发主题， 这个是在一个项目中的做...

写的一般般， 有什么bug之类的是在所难免， 望见谅

功能说明:

1. 即时控制用户输入

2. 将输入的内容进行即时格式化 【保持edit控件的内容的格式为: 123,456,789.12】

3. 提供直接格式化的接口， 当你不需要用控件，而只是想经行格式化

<script language=javascript>/*************************************************************************************************** $ module name: CFloatEdit $ file: floatedit.js $ description：set an input edit controls text's format to float; $ $ author: Lovely Life $ date: 2007-11-7 $ support:  http://onlyaa.com [javascript经典专区] $ update records: $ update... $ $ $ update date 2007-11-16 by Lovely Life $ 1.修改按键按下时的处理, 对用户输入进行处理, 禁止不符合规则的输入 $ 2.解决了由于删除或者插入数字时光标位置的BUG $ $ update date 2007-12-5 by Lovely Life $ 1.修改焦点问题: 在失去焦点后,但移动到一个不能获得焦点的日期控件上, 则当有输入时,又返回到floatedit控件 $ $ update date 2007-12-12 by Lovely Life $ 1.更改_create接口, 新增value初始化，并格式化 $ 2.增加_convert装换接口, 这样很容易的将普通的文本输入控件，转换成floatedit, 无需用_create创建 $ 3.增加_formatFloat接口, 格式化控件的数字 $ $ update date 2007-12-13 by Lovely Life $ 1.去除"屏蔽TAB键"，恢复TAB键 $ 2.屏蔽当光标在"."之前一位的操作 $ $ update daate 2007-12-13 by Lovely Life $ 1.当控件失去焦点时，应该使得keyup事件处理无效，否则当焦点从浮点控件移到无焦点的ActiveX时，有事件处理时， $ 焦点又回到浮点控件上, 给操作上带来不便 $ $ update date 2007-12-18 by Lovely Life $ 1.修正方向键的控制，解决光标在小数点后不能移动 $ $ update date 2007-12-26 by Lovely Life $ 1.修正光标在","号前按下delete键时不能正常删除数字， 已经解决 $ $ update date 2007-12-27 by Lovely Life $ 1.在控件内选定内容后，delete键不能删除选定内容，而且光标位置移动不正确 $ 2.扩展了Array的方法isInarray(), 功能是查找指定的value是否在该数组中，如果存在则返回true, 否则返回false******************************************************************************************************/String.prototype.left = function(nLength){return this.substr(0, nLength);};String.prototype.right = function(nLength){return this.substr(this.length - nLength, nLength);};String.prototype.mid = function(index, nLength){return this.substr(index, nLength);};String.prototype.count = function(char){var ar = this.split(char);return (ar.length - 1);}Array.prototype.isInarray = function(v){for( var i=0; i < this.length; i++ ) {if( v == this[i] ){return true;}}return false;}var THIS;var oFloatEdit = new CFloatEdit();function CFloatEdit(){this.initValue = "0.00";this.bufTemp = "";// 临时缓冲this.mCount = 0;        // ","的个数this.movePre = false;  // 光标是否向右移动this.moveNext = false; // 光标是否向左移动this.change = true;this.ismoved = true;this.isnextto = false;this.moveto = 0;THIS = this;/*------------------------------------------------------------- $ 函数名:_create $ 功能:创建浮点格式输入控件: $ 参数:divid-> 在所要添加该控件的地方插入以下代码: $ [<div id="eDivid"></div>],以前述代码为例, $ 调用该函数并将 oDivid 传给 divid 参数. $id-> 设置该编辑控件的id属性 $id-> 为该输入控件设置的id, 方便其他的地方调用 $cls-> 如果为空，使用默认样式，否则设置CSS样式---------------------------------------------------------------*/this._create = function(container, id, value, cls){var div = this.$(container);var floatedit = document.createElement("INPUT");div.appendChild(floatedit);floatedit.id = id;if( cls != "" )floatedit.className = cls;floatedit.value = value;floatedit.style.imeMode = "disabled";floatedit.size = 22;this._processInput(floatedit);this._convert(floatedit);};this._convert = function(e){e = this.$(e);e.style.imeMode = "disabled";if( e.size == "" )e.size = 22;this._processInput(e);e.onfocus = function(){//alert("onfocus"); load keydown keyup beforepaste eventTHIS._bindKeyDown(this);THIS._bindKeyUp(this);//THIS._bindBeforePaste(this);}e.onblur = function(){//alert("onblur");this.onkeydown = null;this.onkeyup = null;};// 初始化结束后将失去焦点，这里必须要加上e.blur();};this._formatFloat = function(e){this._processInput(e);};this._bindKeyUp = function(e){e = this.$(e);e.onkeyup = function(){var pos = THIS._getCaret(this)if( event.keyCode == 46 )THIS.ismoved = false;THIS._processInput(this);THIS.ismoved = true;};};this._bindBeforePaste = function(e){e = this.$(e);e.onbeforepaste = function() {clipboardData.setData('text','')};};this._bindKeyDown = function(e){e = this.$(e);e.onkeydown = function() {if( event.shiftKey){event.returnValue = false;return;}if( [35, 36].isInarray(event.keyCode)){return;}// 获得光标位置var pos = THIS._getCaret(this);// 处理控件选中内容不为空if( document.selection.createRange().duplicate().text != "" ){THIS.isnextto = true;if( (event.keyCode > 47 && event.keyCode <58) || (event.keyCode > 95 && event.keyCode < 106 ) ) {var len = document.selection.createRange().duplicate().text.length;THIS.moveto = pos - len + 1;return;}}//处理TAB键if( event.keyCode == 9 ){return;}// 处理当"."按下时if( [188, 116].isInarray(event.keyCode) ){event.returnValue = false;}// 允许添加"-"在必须是在首位置if( [109, 189].isInarray(event.keyCode)){if( pos == 0 )return;elseevent.returnValue = false;}// 处理DELETE和方向键if( [46, 37, 38, 39, 40].isInarray(event.keyCode) ){if( event.keyCode == 46 ){if( this.value.mid(pos, 1) == '.' || this.value.mid(pos, 1) == ',' ){if( document.selection.createRange().duplicate().text == "" ){THIS._setCaret(this, pos+1);}else{THIS.ismoved = false;}}return;}if( pos >= this.value.length && event.keyCode == 39 )event.returnValue = false;return;}// 处理退格键if( event.keyCode == 8 ){// 光标前一位是","if( this.value.mid(pos-1, 1) == ','){THIS._setCaret(this, pos - 1);THIS.moveNext = true;}// 光标if( this.value.mid(pos-1, 1) == '.'){THIS._setCaret(this, pos - 1);}return;}//处理输入小数点"."if( [190, 110].isInarray(event.keyCode)){var cpos = this.value.indexOf('.');// 当光标在小数点之后, 则将光标位置移至小数点下一位if( pos > cpos ){THIS._setCaret(this, cpos+1);event.returnValue = false;} else if( pos < cpos ) {//THIS._setCaret(this, pos+2);}return;}// 处理数字if( (event.keyCode > 47 && event.keyCode <58) || (event.keyCode > 95 && event.keyCode < 106 ) ) {if( document.selection.createRange().duplicate().text != "" ){THIS.isnext = true;var len = document.selection.createRange().duplicate().text.length;THIS.moveto = pos - len + 1;}return;}else{event.returnValue = false;}event.returnValue = false;}}/*------------------------------------------------------------- $ 函数名:_processInput $ 功能:处理用户输入数据的格式， 必须符合以下规则: 1. 只能是数字，".";2. 小数点只能存在一个，且小数部分长度只能是2;3. 整数部分为货币格式, 如: 1234567  -> 1,234,567; $ 参数:   e -> 输入控件句柄---------------------------------------------------------------*/this._processInput = function(e){var intPart = "", floatPart = "";var str = e.value;var pos = this._getCaret(e);if( str == "" ){if(e.getAttribute("rel") == "int"){e.value = "";} else {e.value = this.initValue;}return;//event.returnValue = false;}//处理符号var signal = str.left(1);// 取左边的一位字符串， 如果是负号则从字符串中删除if( signal != "-")signal = "";elsestr = str.right(str.length-1)// 处理小数部分str = str.replace(/[^(\d|\.|,)]/g, '')var ar;ar = str.split('.');if( ar.length < 2 ){floatPart = "00";}else{var strTemp;strTemp = ar[ar.length-1].replace(/[^(\d)]/g, '');var len = strTemp.length;if( len == 0 ){ floatPart = "00";}else if(len == 1 ){ floatPart = strTemp + "0";}else if(len > 2 ){ floatPart = strTemp.left(2);} else { floatPart = strTemp; }}//处理整数部分var tint, str;var icount = 0;tint = ar[0];var prepos = tint.count(',');// 删除","号前的","个数tint = tint.replace(/,/g, ''); // 删除","// 过滤左边的连续的0if( tint == "" ) tint == "0"// 用","分割千分位while( tint.length > 3 ){intPart = "," + tint.right(3) + intPart;icount++;tint = tint.left( tint.length - 3 );}if( tint.length > 0 ) intPart = tint + intPart;// 组合数字if( e.getAttribute("rel") == "int" ){str = signal + intPart;} else {str = signal + intPart + "." + floatPart;}e.value = str;// 处理光标移动的位置var ecount = 0;ecount = str.count(',')// 退格键时光标不变if( this.ismoved == true ){if( this.isnextto ){// 当控件有选择内容时 if( ecount > prepos )pos = this.moveto+1;elsepos = this.moveto;}else{if( this.mCount != ecount ) {// ","减少时候,光标向左移动["，"的变化的个数]位if( this.mCount > ecount )pos = pos-(this.mCount - ecount);// ","增加,光标向右移动["，"的变化的个数]位if( this.mCount < ecount )pos=pos + ( ecount - this.mCount);}}}this.mCount = ecount;//设置光标位置if( this.moveNext ) pos++;if( this.movePre )pos--;this._setCaret(e, pos);this.movePre = false;this.moveNext = false;this.isnextto = false;this.ismoved = true;intPart = str = "";};/*------------------------------------------------------------- $ 函数名:_getCaret $ 功能:获得当前光标的位置 $ 参数:element -> 输入控件句柄---------------------------------------------------------------*/this._getCaret = function (element){element = this.$(element);// 当控件是文本区或者文本框时并且可写才能有光标位置，否则直接返回//alert(this.display(window));if( !event ){return;}if( event.srcElement != element )return;if( element.readOnly == true || element.disabled == true ){return;}element.focus();var rang = document.selection.createRange();rang.setEndPoint("StartToStart", element.createTextRange())return rang.text.length;};/*------------------------------------------------------------- $ 函数名:_setCaret $ 功能:设置当前光标的位置 $ 参数:element -> 输入控件句柄---------------------------------------------------------------*/this._setCaret = function(element, pos){if( !event )return;if( event.srcElement != element )return;try{// 当控件是文本区或者文本框时并且可写才能有光标位置，否则直接返回if( element.readOnly == true || element.disabled == true ){return;}var r =element.createTextRange();r.moveStart('character', pos);r.collapse(true);r.select();}catch(e){// show error message at here}};this.$ = function(e) {if( typeof e != 'object' )return document.getElementById(e);elsereturn e;}// code end}function convertToFloatEdit(id){oFloatEdit._convert(id);}function createFloatEdit(container, id, value, className){oFloatEdit._create(container, id, value, className);}function formatFloat(id){oFloatEdit._formatFloat(id);}</script><input type=text onfocus="convertToFloatEdit(this);"><pre>接口: 1. createFloatEdit(container, id, value, className)//  创建浮点输入控件 2. formatFloat(id)//  格式化控件的内容成浮点格式的 3. convertToFloatEdit(id)//  将普通的输入控件转换成浮点控件支持站点 <a href='http://onlyaa.com' target=_blank>[javascript经典专区]</a></pre>