博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

javascript---金额文本框练习【转】

Posted on 2011-12-20 11:37  itcfj  阅读(295)  评论(0编辑  收藏  举报
javascript---金额文本框练习
2011-10-15 18:06

财务相关系统中涉及到金额的文本框有如下要求:
• 进入金额文本文本框不使用中文输入法
• 不能输入非数字
• 焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千分位

     1.禁用输入法:,禁止键入非法值,只有这些才能被键入(k == 9) || (k == 13) ||(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)。

 onkeydown="return numonKeyDown()" 不要写成onkeydown="numonKeyDown()" 区分事件响应函数
和事件响应函数调用的函数。

    2.禁止粘贴(伟大的Tester),<input onpaste="return false;" ,太暴力,应该只是禁
止粘贴非法值。在onpaste中通过clipboardData.getData('Text')取到粘贴板中的值,然后遍历每个字符,看是否是合法的值,如果全部是合法值才允许粘贴,只要有一个非法值就禁止粘贴。charAt、charCodeAt 添加千分位的方法,见备注  

   3.焦点在的时候左对齐没有千分位,焦点不在时右对齐千分位。
this.style.textAlign='right'

 

<!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 initEvent() {
            var txtAmount = document.getElementById("txtAmount");
            txtAmount.onkeydown = onkeydownEvent; //键盘输入时效果,限制非法字符输入
            txtAmount.onblur = onblurEvent;//焦点离开时的效果(数字向右对齐)
            txtAmount.onpaste = function () {
                var text = clipboardData.getData("text");
                if (valid(text)) {
                    clipboardData.setData("text", text); 
                }
                else {  
                    return false;
                }
            };    //禁止粘贴1.4
        }
        function valid(txt) {
            var i = 0;
            var len = txt.length;
            for (i = 0; i < len; i++) {
                var checkTxt = txt.charCodeAt(i); //使用charCodeAt方法,方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
                if (checkTxt == 37 || checkTxt == 8 || checkTxt == 39 || checkTxt == 46 || checkTxt == 190 || checkTxt == 110 || (checkTxt >= 48 && checkTxt <= 57) || (checkTxt >= 96 && checkTxt <= 105)) {
                    continue;

                }
                else {
                    return false;
                }
            }
            return true;
           
        }
        function onkeydownEvent() {
            if (event.keyCode == 37 ||event.keyCode==8|| event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
            }
            else {
                return false;
            }
        }
        function onblurEvent() {
          //  var txtAmount = document.getElementById("txtAmount");
         this.style.textAlign = "right";
         // txtAmount.value = txtAmount.value + '';
         this.value = commafy(this.value);
        }

        function commafy(n) {
            n = n + "";
            var re = /(-?\d+)(\d{3})/;
            while (re.test(n)) {
                n = n.replace(re, "$1,$2");
            }
            return n;
           // var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$1,$2") + s2; });
            //return n1;
        }
   
    </script>
</head>
<body onload="initEvent()">
 <input type="text" id="txtAmount" onclick="this.style.textAlign='left';this.value=this.value.replace(/,/g,'');" />
</body>
</html>