如何在输入字段中的每5个数字后面添加一个空格(用户键入)?
12345 56789 12345 56789atr
限制是我不能使用任何像jQuery这样的框架。这必须使用纯Javascript或CSS来完成。
我还需要支持按退格并更正数字的能力,或者将光标放在任何地方并开始用退格进行更正。
以下代码基于此处的答案:如何为IBAN注册每4个字符插入空格?
退格不可靠
function space(str, after) {
if (!str) {
return false;
}
after = after || 4;
var v = str.replace(/[^dA-Z]/g, ''),
reg = new RegExp(".{" + after + "}", "g");
return v.replace(reg, function(a) {
return a + ' ';
});
}
var el = document.getElementById('pin');
el.addEventListener('keyup', function() {
this.value = space(this.value, 4);
});
<form>
<input autocapitalize="off" autocorrect="off" maxlength=20 type="text" placeholder="type the pin" id="pin" name="pin" />
<script>
</script>
</form>
这里有一个相对较短的方法:
只需为input
事件(或keyup
/keydown
)添加一个事件侦听器,然后使用一些正则表达式。
在下面的示例中,最初使用.replace(/s/g, '')
删除所有空白,然后.replace(/(d{5})/g, '$1 ')
实质上在每5个字符后添加一个空格。
删除所有空白的原因是,每5个字符之间总是有一个空格(即使您返回并编辑以前的字符)。
document.getElementById('target').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/s/g, '').replace(/(d{5})/g, '$1 ').trim();
});
<input id="target" type="text"/>
上面的方法似乎唯一需要注意的是,在编辑以前的字符时,插入符号的位置会丢失。
如果要防止这种情况,请访问selectionEnd
属性来检索插入符号的当前位置,然后在应用正则表达式格式后设置插入符号的位置。
document.getElementById('target').addEventListener('input', function (e) {
var target = e.target, position = target.selectionEnd, length = target.value.length;
target.value = target.value.replace(/s/g, '').replace(/(d{5})/g, '$1 ').trim();
target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});
<input id="target" type="text"/>
您会注意到,当插入符号后面的字符是一个空格时,会有一个小问题(因为最初检索插入符号的位置时没有考虑到空格)。为了解决这个问题,如果后面的字符是一个空格,则位置会手动递增(假设实际添加了一个空格——这是通过比较替换字符前后的长度来确定的)。
function myFunction() {
str = document.getElementById('num').value;
str=str.replace(/s/g, '');
if(str.length%5==0){
document.getElementById('num').value+=" ";
}
}
<input id='num' type="text" onkeyup="myFunction()">