金额文本框

实现的效果：只允许输入数字，TAB，回车，del，退格，方向键；不允许输入字符，不能切换中文输入法，不允许粘贴非数字内容。

代码如下：

<!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>
    <style type="text/css">
        input
        {
            ime-mode:disabled;  //禁止使用中文输入法
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            //在body中 键盘按下时候发生
            window.document.body.onkeydown = function() {
                if (event.keyCode == "13")
                    event.keyCode = "9";
            };
            //给所有文本框注册事件
            var texts = document.getElementsByTagName("input");
            for (var i = 0; i < texts.length; i++) {
                if (texts[i].type == "text") {
                    //注册onkeydown事件 只能输入数字
                    texts[i].onkeydown = function() {
                        var k = event.keyCode;
                        if ((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)) {
                        } else {
                            //取消后续内容的执行
                            return false;
                        }
                    };
                    //注册onpaste事件，只让粘贴数字
                    texts[i].onpaste = function() {
                        var tmp = window.clipboardData.getData("text");
                        var reg = /^\d+[.]?\d+$/;
                        if (!reg.test(tmp)) {
                            //取消后续内容的执行
                            alert("禁止粘贴非法内容");
                            return false;
                        }
                    };
                    //获得焦点 让内容在文本框左边
                    texts[i].onfocus = function() {
                        this.style.textAlign = "left";
                        //替换所有的,  记得用正则
                        this.value = this.value.replace(/,/g, "");
                        //让光标显示在最后
                        setFocus(this, this.value.length);
                    }
                    //
                    texts[i].onblur = function() {
                        this.style.textAlign = "right";
                        //千分位
                        this.value = commafy(this.value);
                    }
                }
            }
        }
        //转换千分位
        function commafy(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;
        }
        //设置光标位置
        function setFocus(txt, pos) {
            var r = txt.createTextRange();
            r.moveStart('character', pos);
            r.select();
        }
    </script>
    
</head>
<body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
</body>
</html>
posted @ 2012-09-21 10:06  DaBan  阅读(261)  评论(0)  编辑  收藏  举报