<html>

<head>

    <title></title>

</head>

<body>

    <input id="inputDom" />

    <script type="text/javascript">

        var inputDom = document.getElementById('inputDom');

        var maxLen = 0;

        inputDom.oninput = function() {

            var value = this.value;

            var valueLen = value.length;

            var foucsNum = getCursortPosition(inputDom);

            if(valueLen > 0){

                var c = value.replace(/\s/g,  "");

                var Len = c.length;

                var List = c.split('');

                var initNum = 0;

                for(var i=1;i<Len;i++) {

                    if(i%4 == 0) {　　//每四位分一组

                        List.splice(i+initNum,0,' ');　　//此处为使用空格分隔

                        initNum++

                    }

                }

                this.value  = List.join('');

                if(maxLen < this.value.length) {

                    if(foucsNum%5 == 0) {

                        setTimeout(function() {

                            setCaretPosition(inputDom,foucsNum+1)

                        },0);

                    }else {

                        setTimeout(function() {

                            setCaretPosition(inputDom,foucsNum)

                        },0);

                    }

                }else {

                    if(foucsNum%5 == 0) {

                        setTimeout(function() {

                            setCaretPosition(inputDom,foucsNum-1)

                        },0);

                    }else {

                        setTimeout(function() {

                            setCaretPosition(inputDom,foucsNum)

                        },0);

                    }

                }

                maxLen = this.value.length;

            }

        }

　　　　　//控制光标移动时，需要使用定时器，避免出现光标控制失效的情况

        function getCursortPosition(ctrl) {        //获取光标的位置

            var CaretPos = 0;   // IE Support

            if (document.selection) {

                ctrl.focus();

                var Sel = document.selection.createRange();

                Sel.moveStart ('character', -ctrl.value.length);

                CaretPos = Sel.text.length;

            }

            // Firefox support

            else if (ctrl.selectionStart || ctrl.selectionStart == '0')

                CaretPos = ctrl.selectionStart;

            return (CaretPos);

        }

        function setCaretPosition(ctrl, pos) {        //设置光标的位置

            if(ctrl.setSelectionRange){

                ctrl.focus();

                ctrl.setSelectionRange(pos,pos);

            }

            else if (ctrl.createTextRange) {

                var range = ctrl.createTextRange();

                range.collapse(true);

                range.moveEnd('character', pos);

                range.moveStart('character', pos);

                range.select();

            }

        }

    </script>

</body>

</html>

　　如果以上代码无法满足业务需要，可以使用插件Cleave.js，进行input框中数据的格式化；

js格式化input输入框内容（每几位分一组，并使用特定字符分隔）的更多相关文章

  1. js判断input输入框为空时遇到的问题 弹窗后，光标没有定位到输入框，而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  2. Input输入框内容限制

    该文百度的嘻嘻,原文:Input输入框内容限制 输入大小写字母.数字.下划线: <input type="text" onkeyup="this.value=thi ...

  3. js验证input输入框（字母，数字，符号，中文）

    [javascript]代码库 <h1>js验证输入框内容</h1> <br /> <br /> 只能输入英文 <input type=" ...

  4. js 验证input 输入框

    <h1>js验证输入框内容</h1><br /><br /> 只能输入英文<input type="text" onkeyup ...

  5. input输入框内容变化实时监听

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...

  6. 使用js实现input输入框的增加

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 格式化input输入内容（金额）

    项目中要用到格式化金额输入框,要求每三个数字用逗号分割开. 添加一个directive angular.module('myApp.directives', []) .directive('filte ...

  8. 【链接】js监听input输入框内容变化

    https://blog.csdn.net/idomyway/article/details/79078625 $("#input1").bind("input prop ...

  9. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

随机推荐

  1. activiti-ldap-integration

    https://stackoverflow.com/questions/19488764/activiti-ldap-integration https://community.alfresco.co ...

  2. php的一些算法题

    1.有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,请编程输出两年内每个月的兔子总数为多少? <?php function getRes ...

  3. 关于python性能相关测试cProfile库

    http://blog.csdn.net/gzlaiyonghao/article/details/1483728 收藏一个大神对这个问题的介绍. 我就不多做污染了.另外还有两个 增强库可以针对cPr ...

  4. lambda函数对象与作用域 （重点）

    Python函数在定义的时候,默认参数L的值就被计算出来了,即[],因为默认参数L也是一个变量,它指向对象[],每次调用该函数,如果改变了L的内容,则下次调用时,默认参数的内容就变了,不再是函数定义时 ...

  5. appium学习记录2

    unittest 学习 每执行一次 testcase 就会调用一次 setUP 与teardown 类方法只会执行一次 开始 与结束时候执行 类似反射方法 __init__ 与 __del__ set ...

  6. docker --swarm创建一个集群

    如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...

  7. Django-website 程序案例系列-2 字典操作

    设置一个全局字段: USER_DICT = { 'k1': 'root1', 'k2': 'root2', 'k3': 'root3', } def index(request): return re ...

  8. BZOJ1018[SHOI2008]堵塞的交通——线段树

    题目描述 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常奇特,整个国家的交通系统可以被看成是一个2行C列的矩形网格,网格上的每个点代表一个城市,相邻的城市之间有一条道路,所以总 ...

  9. 如何修改可运行Jar包，如何反编译Jar包

    将可运行Jar包,反编译成项目,修改代码,再次编译,打包. 需要工具:jd-gui.myeclipse 具体步骤: 1.使用jd-gui打开原始的Jar包,选择File-->Save All  ...

  10. MT【36】反函数有关的一道题

    解答:$\frac{7}{2}$ 做适当的变换,再令$x-1=t$容易划归到我们熟悉的题型,$2^t=\frac{3}{2}-t,log_2t=\frac{3}{2}-t$作图或者利用函数单调性可得$ ...