<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. HDU 2012 素数判定

    http://acm.hdu.edu.cn/showproblem.php?pid=2012 Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括 ...

  2. Fortify Scan - Static Code Analyzer

    https://software.microfocus.com/en-us/products/application-security-testing/overview https://softwar ...

  3. jmeter（psot） 表单提交 注意项

    Form表单提交:直接使用表单方式提交即可,此方式采取页面直接跳转的形式.用jmeter请求的时候,日志打印传的参数是空的.考虑到form提交和http的提交请求头可能是不一样的,所以优化了请求头: ...

  4. Docker(十三)-Docker save and load镜像保存

    持久化docker的镜像或容器的方法 Docker的镜像和容器可以有两种方式来导出 docker save #ID or #Name docker export #ID or #Name docker ...

  5. 一个简单的修改 iis默认页面的方法..

    1. IIS 默认打开的是欢迎页面 2. 然后找到了一个比较简单的修改默认界面的方法: 找到这个文件的默认路径 C:\inetpub\wwwroot 然后修改 iisstart.htm 文件 在hea ...

  6. js cookies

    cookie用於識別用戶,存儲在訪問者的計算機里,當用戶首次使用瀏覽器時,會發送cookie.用戶可以創建和獲取cookie. cookie可以存儲用戶名字.用戶密碼和訪問時間等. document. ...

  7. spring之跨模块引用配置文件

    1.导入包或加入依赖关系 2.引入spring配置文件: <?xml version="1.0" encoding="UTF-8"?> <be ...

  8. P2209 [USACO13OPEN]燃油经济性Fuel Economy

    题面 sol:(思想):开一个大根堆和一个小根堆,每次计算到下了一个加油站用掉的油时尽量用小根堆中的元素,且同时删去大根堆中的相应位置的元素,当前加油站如果足够便宜,就可以把大根堆中的元素替换掉: ( ...

  9. 微软开放 6 万项 Linux 专利，有哪些是我们该注意的？

    导读 上周,微软宣布正式加入 Open Invention Network (“OIN”) 社区,开放其 6 万多项 Linux 专利.消息一出,许多人疑惑微软为什么要这么做?作为普通开发者,是否能使 ...

  10. Json Self referencing loop detected

    Self referencing loop detected......的错误 解决方案: 1 增加  [JsonIgnore]  过滤关联,使其不参与序列化. 这个方法简单粗暴.但是你就没办法获取关 ...