<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. octave基本指令2

    octave基本指令2 数据移动 >> pwd %显示出当前路径 ans C:\Octave\3.2.4_gcc-4 >> cd 'G:\machine learning' % ...

  2. HTML 引入Css样式

  3. [转帖]CR3,PDE,PTE,TLB 内存管理的简单说明

    CR3,PDE,PTE,TLB  Copy From https://www.cnblogs.com/zzSoftware/archive/2013/02/11/2908824.html   网上关于 ...

  4. 数组 this.setData快捷赋值

    let list=this.data.list; let listString = `{"list[${index}].sliderSure":${!list[index].sli ...

  5. 远程连接db2数据库

    在db2数据库中,需要理解catalog(编目)这个概念,理解前先说下db2数据库的体系结构:由系统(节点)也就是主机,下面是实例,实例下面是数据库,然后是表空间,再是数据库对象.现在假设你有一个数据 ...

  6. Null Object Design Pattern (Python recipe)

    Null Object 个人感觉非常有用.也是在review公司其他同事写代码的时候看到. 当时使用了flask的request全局请求变量g,然后使用了g.x保存了一个东西. 当时在view代码读取 ...

  7. BZOJ2004 HNOI2010公交线路（状压dp+矩阵快速幂）

    由数据范围容易想到矩阵快速幂和状压. 显然若要满足一辆公交车的相邻站台差不超过p,则每相邻p个站台中每辆车至少经过一个站台.可以发现这既是必要的,也是充分的. 开始的时候所有车是相邻的.考虑每次把一辆 ...

  8. Mvc 前台 匿名对象

    View无法使用 dynamic 报错: object 未包含....的属性 这里需要区别一下:如果dynamic只是简单模型,那么还是可以使用的.例如 dynamic v = new Expando ...

  9. python构建bp神经网络_鸢尾花分类(一个隐藏层)__1.数据集

    IDE:jupyter 目前我知道的数据集来源有两个,一个是csv数据集文件另一个是从sklearn.datasets导入 1.1 csv格式的数据集(下载地址已上传到博客园----数据集.rar) ...

  10. 洛谷P2619 [国家集训队2]Tree I（带权二分，Kruscal，归并排序）

    洛谷题目传送门 给一个比较有逼格的名词--WQS二分/带权二分/DP凸优化(当然这题不是DP). 用来解决一种特定类型的问题: 有\(n\)个物品,选择每一个都会有相应的权值,需要求出强制选\(nee ...