zoukankan      html  css  js  c++  java
  • 金额文本框

    实现的效果:只允许输入数字,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>
  • 相关阅读:
    漫话JavaScript与异步·第三话——Generator:化异步为同步
    HTTPS、证书与使用Charles抓包
    【前端基础】动态脚本与JSONP
    前端十万个为什么(之一):我们为什么需要npm?
    一个前端程序员的费曼技巧练习
    漫话JavaScript与异步·第二话——Promise:一诺千金
    漫话JavaScript与异步·第一话——异步:何处惹尘埃
    Flex:CSS3布局利器
    BFC探秘
    虚机的部分操作
  • 原文地址:https://www.cnblogs.com/daban/p/2696443.html
Copyright © 2011-2022 走看看