<h3>这里设置第四位开始加空格</h3>
<input data-gap=4 maxlength="14" size="14" autocomplete="on" type="text" placeholder="请输入卡号"/>
<button>获取输入值</button>
<script>
var input = document.querySelectorAll('input')[0];
var gap = parseInt(input.getAttribute('data-gap'));
input.oninput = function() {
var numbers = this.value.replace(/[^\w]|/ig, '').split('') ; // 获取原始值
// var numbers = this.value.replace(/\s+/g, '').split('') // 获取原始值
var back = '' ;
numbers.forEach(function(n, i) {
back += n + ((i + 1) % gap === 0 ? '-' : '') ; // 处理加空格或-
});
var len = back.length;
var last = back.charAt(len - 1);
//if (last === ' ' || isNaN(last)) {
if (last === ' ' || last === '-') {
back = back.substring(0, len - 1) ; // 移除末尾无用字符
}
this.value = back.toUpperCase();
// 兼容处理
setTimeout(function() {
this.setSelectionRange(len, len);
this.focus();
}.bind(this), 0);
};
</script>
输入框输入值自动格式化,每4位加空格或-
最新推荐文章于 2023-11-17 17:25:43 发布