您的位置：首页 > Web前端 > JavaScript

javascript中Dom对象实现金额文本框

2012-05-31 14:27 148 查看
金额文本框常常出现在财务管理系统中，对其文本框有如下效果：

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”。

第三，失去焦点后自动增加千分位。此时需要使用正则表达式。具体自动增加千分位的代码如下：

function comafy(n){
var re=/\d{1,3}(?=(\d{3})+$)/g;
var n1=n.replace(/^(\d+)(\.\d+)?$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
return n1;
}


第四，禁止粘贴不符合格式的文本。先取到剪贴板中的文本，然后进行遍历，如果其中的文本不符合格式则返回false。

所有代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
function numOnKeyDown(key){
var key=window.event.keyCode;
if(key==13){
window.event.keyCode=9;
}
return isVlueNumber(key);
}
function isVlueNumber(key){
return((key==13)||(key==9)||(key==8)||(key==46)||((key>=37)&&(key<=40))||((key>=48)&&(key<=57))||((key>=96)&&(key<=105))
||(key==109)||(key==110)||(key==189)||(key==190))

}
function numVerify(){
var data=window.clipboardData.getData("Text");
for(var i=0;i<data.length;i++){
var asc=data.charCodeAt(i);
if(!isVlueNumber(asc)){
return false;
}
}
}
function comafy(n){
var re=/\d{1,3}(?=(\d{3})+$)/g;
var n1=n.replace(/^(\d+)(\.\d+)?$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
return n1;
}

</script>
</head>
<body>
<input id="tx1" type="text" onfocus="document.getElementById('tx1').style.textAlign='left';this.value=this.value.replace('\,','');" onpaste="return numVerify()"
onblur="document.getElementById('tx1').style.textAlign='right';this.value=comafy(this.value);" onkeydown="return numOnKeyDown(this);"  style="ime-mode:disabled;"  />

</body>
</html>


在整个功能的实现中，正则表达式是一个难点，这里就不一一鏊述了。代码中如果存在问题可进行评论，希望和大家一起学习进步！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航