input 银行卡输入框,四位一空格
项目中遇到输入银行卡的input框,并且要求是4位一空,四位一空的问题比较容易
<input type="tel" id="bankCard" placeholder="" >
<script>
$("#bankCard").on("input",function(){
var val=$(this).val().replace(/\s/g,"").replace(/(\d{4})/g,"$1 ");
$(this).val(val);
});
</script>
jquery请自己引入;
但是空了之后,从中间添加,中间删除光标就会乱跳,以下方法可以完美解决这个问题:
<input type="tel" id="bankCard" placeholder="" >
<script>
$("#bankCard").on("keyup",function(){
//获取当前光标的位置
var caret = this.selectionStart;
//获取当前的value
var value = this.value;
//从左边沿到坐标之间的空格数
var sp = (value.slice(0, caret).match(/\s/g) || []).length;
//去掉所有空格
var nospace = value.replace(/\s/g, '');
//重新插入空格
var curVal = this.value = nospace.replace(/\D+/g,"").replace(/(\d{4})/g, "$1 ").trim();
//从左边沿到原坐标之间的空格数
var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length;
//修正光标位置
this.selectionEnd = this.selectionStart = caret + curSp - sp;
});
</script>