<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. apache Storm学习之二-基本概念介绍

    2.1 Storm基本概念 在运行一个Storm任务之前,需要了解一些概念: Topologies Streams Spouts Bolts Stream groupings Reliability ...

  2. 使用kindeditor来替换ecshop的fckeditor编辑器，让ecshop可以批量上传图片

    老杨原创 kindeditor此编辑器可以让ecshop批量上传图片,可以插入代码,可以全屏编辑,可以插入地图.视频,进行更多word操作,设置字体. 步骤一:进入kindeditor的官网,http ...

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

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

  4. webstrom 安装Babel

    https://www.jianshu.com/p/b9bd2ec9ec80 https://www.cnblogs.com/zhishaofei/p/6061568.html https://blo ...

  5. 详解Windows不重启使环境变量修改生效(经典)

    在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢?下面介绍一种方法: 以修改环境变量“PATH”为 ...

  6. rgb & rgba convert

    rgb & rgba convert RGB color to Hex, Pantone, RAL, HSL, HSV, HSB, JSON. Get color scheme. https: ...

  7. appium使用错误集合

    原因:没有加载该文件 解决方案: cmd 使用:adb shell uiautomator dump 在cmd生成   然后就可以获取元素了 使用send_keys()输入报错  selenium.c ...

  8. luogu3107

    洛谷P3107题面 相对较为模板化的代码 f[i][j][bo1][bo2]记录到第i位,数字num出现了x次(j初始为20,若当前数字不为num,j++:否则j--:最后只要记录j<=20的总 ...

  9. VS2013编译报错error C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS.

    解决方法有两个: 1. 在预编译头文件stdafx.h里(在没有include任何头文件之前)定义下面的宏: #define _CRT_SECURE_NO_DEPRECATE 2. 将sprintf函 ...

  10. pgm终

    这里罗列一些看完此书后遗留的问题: 常用 model 通过 BP/LBP 重新审视 inference 部分 Lauritzen algorithm/Lauritzen-Spiegelhalter a ...