javascript中Dom对象实现金额文本框
金额文本框常常出现在财务管理系统中，对其文本框有如下效果：
1.禁止输入中文和英文字母，只能输入数字，辅助键只有Delete、方向键、Enter键以及Tab键等。
2.当文本框获得焦点时文本会向左对齐，失去焦点后文本向右对齐。
3.失去焦点后会自动增加千分位，获得焦点则去除千分位。
4.禁止粘贴不符合格式的文本。
对于以上效果将如何实现呢？
解决方案：
第一，文本框中禁止输入中文和英文字母。对于键盘中的每一个按键都会有一个键盘码（键盘码不是ASCII码），其中Enter键的键盘码为13，Tab键的键盘码为9，退格键的键盘码为8，Delete键的键盘码为46，方向键的键盘码为37~40，小键盘的数字键盘码为48~57，主键盘的数字键盘码为：96~105，小键盘上的小数点键盘码为110，主键盘上的小数点键盘码为190，小键盘上的负号键盘码为189，主键盘上的符号键盘码为109。知道这些键盘码后只需要判断文本框中的onkeydown事件，当按下的键的键值在这些范围之内则返回一个true，否则则返回一个false。
第二，文本框获得焦点文本向左对齐，失去焦点后文本向右对齐。只需在onfocus和onblur事件中将文本框的style.textAlign分别设置为“left”和“right”。
第三，失去焦点后自动增加千分位。此时需要使用正则表达式。具体自动增加千分位的代码如下：
1 function comafy(n){ 2 var re=/\d{1,3}(?=(\d{3})+$)/g; 3 var n1=n.replace(/^(\d+)(\.\d+)?$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;}); 4 return n1; 5 }
第四，禁止粘贴不符合格式的文本。先取到剪贴板中的文本，然后进行遍历，如果其中的文本不符合格式则返回false。
所有代码如下所示：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <script type="text/javascript"> 6 function numOnKeyDown(key){ 7 var key=window.event.keyCode; 8 if(key==13){ 9 window.event.keyCode=9; 10 } 11 return isVlueNumber(key); 12 } 13 function isVlueNumber(key){ 14 return((key==13)||(key==9)||(key==8)||(key==46)||((key>=37)&&(key<=40))||((key>=48)&&(key<=57))||((key>=96)&&(key<=105)) 15 ||(key==109)||(key==110)||(key==189)||(key==190)) 16 17 } 18 function numVerify(){ 19 var data=window.clipboardData.getData("Text"); 20 for(var i=0;i<data.length;i++){ 21 var asc=data.charCodeAt(i); 22 if(!isVlueNumber(asc)){ 23 return false; 24 } 25 } 26 } 27 function comafy(n){ 28 var re=/\d{1,3}(?=(\d{3})+$)/g; 29 var n1=n.replace(/^(\d+)(\.\d+)?$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;}); 30 return n1; 31 } 32 33 34 35 36 </script> 37 </head> 38 <body> 39 <input id="tx1" type="text" onfocus="document.getElementById('tx1').style.textAlign='left';this.value=this.value.replace('\,','');" onpaste="return numVerify()" 40 onblur="document.getElementById('tx1').style.textAlign='right';this.value=comafy(this.value);" onkeydown="return numOnKeyDown(this);" style="ime-mode:disabled;" /> 41 42 </body> 43 </html>
在整个功能的实现中，正则表达式是一个难点，这里就不一一鏊述了。代码中如果存在问题可进行评论，希望和大家一起学习进步！
