<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. 7-Python3从入门到实战—基础之数据类型（字典-Dictionary）

    Python从入门到实战系列--目录 字典的定义 字典是另一种可变容器模型,且可存储任意类型对象:使用键-值(key-value)存储,具有极快的查找速度: 字典的每个键值(key=>value ...

  2. node的经典事件监听

    let fs = require('fs'); let Event = require('events'); let myEvent = new Event(); //注册一个订阅者 A myEven ...

  3. Oracle面试题(基础篇)

    1. Oracle跟SQL Server 2005的区别? 宏观上: 1). 最大的区别在于平台,oracle可以运行在不同的平台上,sql server只能运行在windows平台上,由于windo ...

  4. 查询数据SELECT 之单表查询

    一.单表查询的语法与关键字的执行优先级""" # 单表查询# 单标查询完整与法:# select distinct(关键字,代表查询的意思,后面跟)字段1,字段2...( ...

  5. Spring AOP切点表达式用法总结

    1. 简介        面向对象编程,也称为OOP(即Object Oriented Programming)最大的优点在于能够将业务模块进行封装,从而达到功能复用的目的.通过面向对象编程,不同的模 ...

  6. 《使用python进行数据分析》

    第一 环境搭建 1. 使用pip安装pandas, numpy, scipy, matplotlib, ipython 注意:首先需要安装venv(不然在下面的安装过程中会提示很多的错误,使用pych ...

  7. RSA，JAVA私钥加密，C#公钥解密

    做这个东西在坑里爬了3天才爬出来,记录下供园友参考.C#程序员一枚,项目需要和Java做数据交互,对方甩了段密文和一个CER证书给我,然后我要对其密文进行解密. RSA 非对称加密,对方用私钥加密,我 ...

  8. 学习记录特别篇之sql，类的继承

    思路: 应用场景: 1.将父类当做一个基础类 大家都去继承该方法,以便少些代码 2.继承父类的方法 同时可以重写该方法时候调用父类原先的方法 实现一石二鸟的效果 即 既增加原先的功能 又新增新的功能 ...

  9. OpenGL 使用 PBO 高速复制屏幕图像到内存或者纹理中

    如果你想给游戏做个截图功能,或者想把屏幕图像弄成一个纹理,你就非常需要 PBO 了 通常情况下,你想把屏幕图像的像素数据读到内存需要用 glReadPixels 然后 pixels 参数传进去一块内存 ...

  10. windows编程按小时生成日志文件

    这是一个简单的日志记录方法,为了避免单个日志文件过大,所以每个小时生成一个新的日志文件 注意:g_pLogPath 可以带路径,但是必须手动创建好路径,保证目录存在.而且要详细到log文件名,不能带后 ...