金额文本框

实现的效果:只允许输入数字,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>

你可能感兴趣的:(文本框)