在 FOCUS 上使用 Javascript 的 Auto Dash（用于电话号码格式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19112011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto Dash using Javascript on FOCUS (for a telephone number format)
提问by xirukitepe
Was trying to achieve, an auto dash for this format XXX-XXX-XXXX
试图实现，这种格式的自动破折号 XXX-XXX-XXXX
Here's what I have so far:
这是我到目前为止所拥有的：
$('.telnumber').keyup(function() {
var foo = $(this).val().split("-").join(""); // remove hyphens
foo = foo.match(new RegExp('.{1,3}', 'g')).join("-");
$(this).val(foo);
});
First 2 blocks are fine, but How can I restrict the last block to accept 4 digits?
前 2 个块很好，但如何限制最后一个块接受 4 位数字？
It's still auto dashing if there are 3 digits so far.
如果到目前为止有 3 个数字，它仍然是自动冲刺。
I'm not good at REGEX so any ideas will be appreciated.
我不擅长 REGEX，所以任何想法都会受到赞赏。
采纳答案by Anirudha
foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
回答by redexp
Here I think best solution. Any non digit chars will be ignored and you will not have extra dashes in the end.
在这里，我认为最好的解决方案。任何非数字字符都将被忽略，并且最后不会有额外的破折号。
$('.telnumber').keyup(function() {
this.value = this.value
.match(/\d*/g).join('')
.match(/(\d{0,3})(\d{0,3})(\d{0,4})/).slice(1).join('-')
.replace(/-*$/g, '')
;
});
回答by Strille
Since you're already using jQuery you might want to check out this jQuery plugin: http://digitalbush.com/projects/masked-input-plugin/
由于您已经在使用 jQuery，您可能想查看这个 jQuery 插件：http: //digitalbush.com/projects/masked-input-plugin/
回答by anusreemn
Simply adding the regex expression as in the first answer just gave me the below result : xxx-xxx-xxx-xxx-xxx...
简单地添加第一个答案中的正则表达式只是给了我以下结果：xxx-xxx-xxx-xxx-xxx ...
This continued. :(
这继续。:(
Hence, I have found a better and perfectly working solution. Simply, add 'maxlength=12' to ur input element!! Checkout the fiddle link :
因此，我找到了一个更好且完美的解决方案。简单地，将'maxlength=12' 添加到您的输入元素中！！查看小提琴链接：
http://jsfiddle.net/juspC/218/
http://jsfiddle.net/juspC/218/
<input type="text" class="telnumber" maxlength="12" />
$('.telnumber').keyup(function() {
foo = $(this).val().split("-").join(""); // remove hyphens
foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
$(this).val(foo);
});
回答by Justin Reigel
Building off of @Anirudha's answer.
基于@Anirudha 的回答。
I see other users asking about the cursor and I apologize if I am going off topic here.
我看到其他用户询问光标，如果我在这里偏离主题，我深表歉意。
For those looking for a phone validation function:
对于那些正在寻找电话验证功能的人：
placing @Anirudha's regex in an .on('input') instead of a .keyUp() will solve the cursor issue (so you only update the value when something gets changed). You can also slice and limit it to a 10 digit number.
将@Anirudha 的正则表达式放在 .on('input') 而不是 .keyUp() 中将解决光标问题（因此您仅在某些内容发生更改时更新值）。您还可以将其切片并将其限制为 10 位数字。
$('.telnumber').on('input', function() {
var foo = $(this).val().split("-").join("").slice(0,10); // remove hyphens
foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
$(this).val(foo);
});
