我正在使用Javascript自动向电话号码添加连字符。需要修改此设置以自动删除连字符，或找到新的修复程序

Question

我在另一个线程中发现了一个非常有用的JS，用于自动为数字断字，但其副产品是，现在他们已经输入了10个数字(美国电话号码(，但如果他们想删除和更改它，他们也必须删除断字。我意识到这不是什么大不了的事，但它让我很恼火，我想找到一个更好的解决方案。

脑海中浮现出几个不同的选择，只是不确定什么是可能的：

1. 添加/修改我的代码，以便在它们删除时，它会在它们删除数字时自动删除连字符，因此它们只按退格键10次，而不是12次。

2. 在文本框中有连字符的外观，但它们实际上不在文本输入区域中。。。就像一个"；背景图像"；可以这么说。我试着用背景SVG为文本区域做这件事，但我无法解决在假连字符周围自动隔开电话号码的问题。至于这种可能的解决方案，我很满意这些东西一直在那里，甚至在键入任何东西之前，或者在他们开始键入数字时出现。

我进行了广泛的搜索，但没有找到任何我需要的东西。我确信一个线程已经存在，但我只是没有找到合适的术语。如果有人有一个链接，那就太神奇了。

这是我现有的代码。。。希望这是我可以通过添加一些简单的东西来完成的。非常感谢您的帮助。

$('#phone').keyup(function(){
$(this).val($(this).val().replace(/(d{3})-?(d{3})-?(d{4})/,'$1-$2-$3'))
});

Answer 1

由于只有在输入至少十个数字时才会格式化数字，因此可以尝试这样的操作。

$('#phone').keyup(function(){
if( $(this).val().length < 10 ){
$(this).val($(this).val().replace(/-/g, ''))
}else{
$(this).val($(this).val().replace(/(d{3})-?(d{3})-?(d{4})/,'$1-$2-$3'))
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="phone">