我是JavaScript的新手，我想在我的输入文本中添加IBAN帐户注册的空格插入。
<input type="text" name="iban" onkeyup="if(this.value.length > 34){this.value=this.value.substr(0, 34);}" />
有我的输入字段;有人能告诉我怎么做到这一点吗？
答案 0 :(得分：54)
现有答案相对较长，看起来像是过度杀戮。此外，它们不能完全发挥作用（例如，一个问题是您无法编辑以前的字符）。
对于那些感兴趣的人，根据Wikipedia：
允许的IBAN字符是数字0到9和26个大写拉丁字母字符A到Z.
这是一个相对较短的版本，类似于现有答案：
document.getElementById('iban').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />
如上所述，需要注意的是，您无法返回并编辑以前的字符。如果你想解决这个问题，你需要通过最初访问selectionEnd属性然后在应用正则表达式格式后设置插入符号位置来检索插入符的当前位置。
document.getElementById('iban').addEventListener('input', function (e) {
var target = e.target, position = target.selectionEnd, length = target.value.length;
target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />
当插入符号后的字符是空格时，您会注意到有一个小问题（因为在最初检索插入符号的位置时没有考虑空格）。要解决此问题，如果后续字符是空格（假设实际添加了空格 - 通过比较替换字符之前和之后的长度来确定），则手动递增位置。
答案 1 :(得分：13)
使用普通的JavaScript，我建议：
function space(el, after) {
// defaults to a space after 4 characters:
after = after || 4;
/* removes all characters in the value that aren't a number,
or in the range from A to Z (uppercase): */
var v = el.value.replace(/[^\dA-Z]/g, ''),
/* creating the regular expression, to allow for the 'after' variable
to be used/changed: */
reg = new RegExp(".{" + after + "}","g")
el.value = v.replace(reg, function (a, b, c) {
return a + ' ';
});
}
var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
space(this, 4);
});
有点迟了，我重写上面的句柄来处理字符串，而不是DOM节点：
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('iban');
el.addEventListener('keyup', function () {
this.value = space(this.value, 4);
});
参考文献：
答案 2 :(得分：2)
您必须捕获每组4位数字，然后在每组之间放置一个空格。
$('input').blur(function () {
//Replace each group 4 digits with a group plus a space
var reformat = this.value.replace(/(\d{4})/g, function(match){
return match + " ";
});
this.value = reformat;
})
这个在输入
时更新元素 //Keys pressed 0 times
var downed = 0;
$('#test').keydown(function (g) {
if(g.code.match("^Digit")){
downed++;
console.log(g)
}
if(downed == 1){
var reformat = this.value.replace(/(\d{4}\s*)/g, function(match){
//Strip spaces
if(match.match(/\s/)){return match;}
return match + " ";
});
console.log(reformat);
this.value = reformat;
//Start recount
downed = 0;
}
});
答案 3 :(得分：1)
管道中角4的数千 integer = integer.replace（/ [^ \ dA-Z] / g，''）。renplace（/（。{3}）/ g，'$ 1。'）。trim（）;
答案 4 :(得分：1)
Josh Crozie的代码确实不错，但并不完整。
两个问题；
下面的代码基于Josh Crozie的代码，现在已解决了上面提到的两个问题，并且出于可读性的考虑，还有些冗长：
var isAndroid = navigator.userAgent.indexOf("ndroid") > -1;
var element = document.getElementById('iban');
element.addEventListener('input', function () {
if (isAndroid) {
// For android 7+ the update of the cursor location is a little bit behind, hence the little delay.
setTimeout(reformatInputField);
return;
}
reformatInputField();
});
function reformatInputField() {
function format(value) {
return value.replace(/[^\dA-Z]/gi, '')
.toUpperCase()
.replace(/(.{4})/g, '$1 ')
.trim();
}
function countSpaces(text) {
var spaces = text.match(/(\s+)/g);
return spaces ? spaces.length : 0;
}
var position = element.selectionEnd;
var previousValue = element.value;
element.value = format(element.value);
if (position !== element.value.length) {
var beforeCaret = previousValue.substr(0, position);
var countPrevious = countSpaces(beforeCaret);
var countCurrent = countSpaces(format(beforeCaret));
element.selectionEnd = position + (countCurrent - countPrevious);
}
}<label for="iban">iban</label>
<input id="iban" type="text" name="iban" size="35" />
答案 5 :(得分：0)
我需要相同的但是对于BVR / BVR +瑞士支付表格。 所以我需要的是每5个字符添加一个空格，但是从字符串的末尾。
示例：“52 86571 22001 00000 10520 15992”或有时更短，如“843 14293 10520 15992”。
因此，如果rev = 1，则通过在添加空格之前和之后反转字符串来解决此问题。
function space(str, stp, rev) {
if (!str) {
return false;
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
if(stp > 0) {
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + stp + "}", "g");
str = v.replace(reg, function (a) {
return a + ' ';
});
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
return str;
}
使用：
var refTxt = space(refNum, 5, 1);
答案 6 :(得分：0)
这是在类型为number或tel的输入中使用JQuery的最短版本：
$('input[type=number], input[type=tel]').on('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
您还可以将4更改为所需的任何其他字符限制。
答案 7 :(得分：0)
我写了一个简单的函数，扩展了David的函数以处理最后一个空格。您也可以指定分隔符。
function spacify(str, after, c) {
if (!str) {
return false;
}
after = after || 4;
c = c || " ";
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + after + "}", "g");
return v.replace(reg, function (a) {
return a + c;
}).replace(/[^0-9]+$/, "");
}
console.log(spacify("123123123131",4," "))
console.log(spacify("12312312313",4,"-"))
答案 8 :(得分：0)
onChangeText={number => {
const data =
number.length % 5 !== 4
? number
.replace(/[^\dA-Z]/g, '')
.replace(/(.{4})/g, '$1-')
.trim()
: number;
this.setState({
...this.state,
card: {...this.state.card, number: data},
});
}}
如果您尝试使用信用卡进行文本输入调整，那么该方法也将帮助您解决退格问题
答案 9 :(得分：-1)
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />ComponentDidMount答案 10 :(得分：-1)
在 4 位后添加空格 用于验证 IBAN 号码
document.getElementById('IBAN').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="IBAN">IBAN</label>
<input id="IBAN" maxlength="14" type="text" name="IBAN" />