使用javascript格式化输入值，用户在输入字段中键入值
使用javascript格式化输入值，用户在输入字段中键入值
提问于 2021-03-08 12:08:17
我有一个长度为14的输入字段，用户在其中输入一个值。当用户键入它时，我希望在前2个字符之后自动添加一个空格，然后在接下来的3个字符之后再添加一个空格。因此，如果用户想输入12345678901，则应该将其格式化为12 345 678 901。
此外，当用户使用backspace清除字符时，应自动删除该空间。因此，在上述情况下，当光标到达9并且用户点击后退空间时，光标应该向左移动两个位置，清除9和前面的空格。
我试着在这里遵循信用卡格式，Format credit card number，但无法理解它是如何完成的。以上链接中的代码是
formatInput(event: any) {
var v = event.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
var matches = v.match(/\d{4,16}/g);
var match = matches && matches[0] || ''
var parts = []
for (let i=0, len=match.length; i<len; i+=4) {
parts.push(match.substring(i, i+4))
}
if (parts.length) {
(<HTMLInputElement>document.getElementById("txtInput")).value =
parts.join(' ')
} else {
(<HTMLInputElement>document.getElementById("txtInput")).value
= event.value;
}
}上述代码在每4位数字后生成空格。我的要求是接受任何字符，并在前2个字符之后生成空格，然后在接下来的3个字符之后生成空格。请帮我解决这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-08 13:29:11
这是一个解决问题的工作示例。
function format(str) {
if (str.length < 2) return str
else {
let [fl,sl,...lstr] = str
lstr =lstr.reduce((acc, el, i) => (i % 3 ? acc[acc.length - 1]+=el : acc.push(el), acc),[])
return `${fl}${sl} ${lstr.join(' ')}`.trim()
}
}
const [input,result]= document.querySelectorAll('#input,#result')
input.oninput =()=>{
const i = input.value.replace(/\s/g, '');
input.value= format(i)
}<input type=text id=input />
<p id="result"></p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66529607
复制相关文章
相似问题
腾讯云开发者
