遇到这样一个需求，输入框在输入银行卡号的时候，需要每4位自动插入一个空格
以下是实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function getCaretPosition(obj) {
var result = 0;
if ('selectionStart' in obj) {
result = obj.selectionStart;
} else {
try{
var rng;
if (obj.tagName == "textarea") {
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x, event.y);
} else {
rng = document.selection.createRange();
}
rng.moveStart("character", -event.srcElement.value.length);
result = rng.text.length;
}catch (e){
throw new Error(10,"asdasdasd")
}
}
return result;
}
function setCaretPosition(tObj, sPos){
if(tObj && sPos !== undefined){
setTimeout(function(){
if(tObj.setSelectionRange){
tObj.setSelectionRange(sPos, sPos);
tObj.focus();
}else if(tObj.createTextRange){
var rng = tObj.createTextRange();
rng.move('character', sPos);
rng.select();
}
}, 0);
}
}
</script>
<script src="./usejQuery/jquery-1.8.2.js"></script>
<style type="text/css">
input{
width: 800px;
height: 25px;
}
</style>
</head>
<body>
<input id="card" type="text" value="">
<script>
function autoSplit(ele, size) {
var lastValue, posn, divisor, whiteRgx, splitRgx, isBackspace;
lastValue = ''
whiteRgx = /\s+/g;
splitRgx = new RegExp('(\\d{' + size + '})(?!$)', 'g');
divisor = size + 1;
$(ele).on('input propertychange', function (event) {
var pos, str, propertyName, length, newValue;
str = $(this).val();
propertyName = event.originalEvent.propertyName;
if (propertyName && propertyName !== 'value' || lastValue == str) {
return ;
}
pos = getCaretPosition(this);
str = str.replace(whiteRgx, '');
length = str.length;
newValue = str.replace(splitRgx, '$1 ');
if (newValue.length <= lastValue.length) {
if (pos % divisor === 0 && isBackspace) {
pos -= 1;
} else if (pos % divisor === size) {
newValue = newValue.split('');
if (!isBackspace) {
newValue.splice(pos + 1, 1);
} else {
newValue.splice(pos - 1, 1);
pos -= 1;
}
newValue = newValue.join('').replace(whiteRgx, '').replace(splitRgx, '$1 ');
}
} else if (pos % divisor === 0) {
pos += 1;
}
lastValue = newValue;
$(this).val(newValue);
setCaretPosition(this, pos);
});
$(ele).on('keydown', function (event) {
isBackspace = event.keyCode === 8;
});
}
autoSplit($('#card'), 4);
</script>
</body>
</html>
此外，在ie8中还有个现象就是，如果把输入框的样式中去掉width或者height，只保留一个，这样会导致input propertychange事件第一次触发，第二次不触发，第三次触发，第四次不触发……这样隔一次才触发一次。只有样式中width和height都设置后才每次都触发。不清楚什么原因
相关推荐
本主题将详细介绍如何实现`EditText`输入电话号码和银行卡号时自动添加空格的功能。 首先，我们需要创建自定义的`EditText`子类，以便覆盖其默认的`addTextChangedListener`行为。这可以通过继承`EditText`并重写...
在这个特定的场景下，我们希望实现的功能是：当用户在`EditText`中输入银行卡号时，每输入四位数字，系统会自动在其后添加一个空格，同时根据输入的银行卡号判断出所属的银行和卡类型。这个功能的实现涉及了多个技术...
标题“输入框四位分割加空格”涉及到的是一个JavaScript（简称JS）的前端开发问题，主要目标是在用户输入数字时，每四位数字自动添加空格，以提高输入的可读性。这种技术常用于银行账号、信用卡号或者电话号码等需要...
实现银行卡号每四位一个空格分隔功能 - **分组捕获**: 利用正则表达式的分组捕获功能，对银行卡号进行分组并插入空格。 #### 6. JavaScript编程技巧 - **字符串操作**: 使用`replace`方法进行字符串的查找和替换。...
3. 银行卡号输入：银行卡号较长，可以每四位跳格，方便用户查看和核对。 通过这个简单的JavaScript数字框输入自动跳格特效，我们可以提高用户在输入数字时的体验，使得输入过程更加直观和便捷。在实际开发中，还...
【EXCEL转文本】 将当前工作表中存储格的内容按指定分隔符号导出为TEXT文本，此为银行代发工资数据与邮局或银行传递数据的便利工具之一。并提供两种方式的转换。 成本核算 【取唯一值】 还在使用<分类汇总>或<小计...
实例219 取一个整数的后四位 331 实例220 求一个数的补码 332 实例221 普通的位运算 333 实例222 整数与0异或 334 第14章 存储管理 335 实例223 使用malloc()函数分配内存 336 实例224 调用calloc()函数动态分 配...
实例172 银行自动存取一体机 278 9.4 多态 284 实例173 饮食文化 284 实例174 使用构造方法的重载计算课程的GPA值 287 第10章 内部类与接口（教学视频：41分钟） 290 10.1 成员内部类 290 实例...
实例172 银行自动存取一体机 278 9.4 多态 284 实例173 饮食文化 284 实例174 使用构造方法的重载计算课程的GPA值 287 第10章 内部类与接口（教学视频：41分钟） 290 10.1 成员内部类 290 实例175 成员内部类的使用...
实例172 银行自动存取一体机 278 9.4 多态 284 实例173 饮食文化 284 实例174 使用构造方法的重载计算课程的GPA值 287 第10章 内部类与接口（教学视频：41分钟） 290 10.1 成员内部类 290 ...
实例172 银行自动存取一体机 278 9.4 多态 284 实例173 饮食文化 284 实例174 使用构造方法的重载计算课程的GPA值 287 第10章 内部类与接口（教学视频：41分钟） 290 10.1 成员内部类 290 实例175 成员内部类的使用...
实例172 银行自动存取一体机 278 9.4 多态 284 实例173 饮食文化 284 实例174 使用构造方法的重载计算课程的GPA值 287 第10章 内部类与接口（教学视频：41分钟） 290 10.1 成员内部类 290 实例175 成员内部类...
121 <br>0200 如何使用正则表达式验证电话号码 121 <br>0201 如何使用正则表达式验证输入密码条件 121 <br>0202 如何使用正则表达式验证邮政编号 121 <br>0203 如何使用正则表达式验证手机号 ...