向电话号码字段值附加+1

Question

我需要正确格式化我的电话号码字段，并且我已经完成了它。

我能够使用此脚本在电话号码中添加短划线，但是如何在输入全部10个号码时向电话号码的前面添加“+1”？

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

Answer 1

我会当去除前缀和连字符。如果可能的话，首先建议您用input（其中有IE 10+ support）代替keyup事件。接下来，您应该重做您的过滤器以获取真正的数值。然后用你的正则表达式来对付它。在我的例子中，我使用虚线分隔的值替换了非10位数字，修剪了所有产生的尾部破折号，并用开头的+1替换了完整的10位数值。

$('#tel').on('input', function(){ 
 
    var filteredValue = this.value.replace('+1 ', '').match(/\d*/g).join(''); 
 
    $(this).val(filteredValue 
 
     .replace(/(\d{0,3})\-?(\d{0,3})\-?(\d{0,4}).*/,'$1-$2-$3') 
 
     .replace(/\-+$/, '') 
 
     .replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'+1 $1-$2-$3')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=tel>

下面是一个简化版本，更接近原始的，只有让在有10位结束的更换。

$('#tel').on('input', function(){ 
 
    var filteredValue = this.value.replace('+1 ', '').match(/\d*/g).join(''); 
 
    $(this).val(filteredValue 
 
     .replace(/(\d{3})\-?(\d{3})\-?(\d{4}).*/,'+1 $1-$2-$3')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=tel>

Answer 2

你可以使用一个回调来添加+1时数为10位数以上，然后在十个位数等

$('#tel').on('keyup', function(){ 
 
\t if (this.value.replace(/\D/g,'').length > 9) { 
 
     \t if (this.value.indexOf('-') === -1) { 
 
     \t \t this.value = '+1' + this.value.replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'); 
 
     \t } 
 
    } else if (this.value.indexOf('-') !== -1) { 
 
    \t this.value = this.value.replace(/(\+1|-)/g,''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="tel">