<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文件名,不能带后 ...