jQuery或Javascript到autoformat手机掩码
我有一个Rails应用程序，我正在将text_field录制为string ，这是一个电话号码，我想在下面的掩码中自动格式化xxx-xxx-xxxx
我正在搜索Stack Overflow并发现这个自动格式电话号码在jquery但是OP正在寻找格式化xxx-xxx-xxx的掩码，我需要弄清楚如何做xxx-xxx-xxxx的掩码xxx-xxx-xxxx
我从这个答案中借了一个剪辑它确实有效，但再次格式化为xxx-xxx-xxxx
$(function(){ $('#call_caller_phone').keyup(function() { this.value = this.value.replace(/(\d{3})\-?/g,'$1-'); }); });
任何人都可以帮我格式化xxx-xxx-xxxx面具吗？
我编写了自定义jQuery代码，请查看下面的代码片段
$("#yourphone").keypress(function (e) { if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; } var curchr = this.value.length; var curval = $(this).val(); if (curchr == 3) { $(this).val(curval + "-"); } else if (curchr == 7) { $(this).val(curval + "-"); } $(this).attr('maxlength', '12'); });
工作小提琴示例https://jsfiddle.net/o2gxgz9r/11639/
编辑：我已经在你的HTML文件中开发了jquery-input-mask-phone-number插件并调用了usPhoneFormat方法。
$（document）.ready（function（）{$（’＃yourphone’）。usPhoneFormat（）;
}）;
使用JSFiddle链接https://jsfiddle.net/1kbat1nb/
NPM参考URL https://www.npmjs.com/package/jquery-input-mask-phone-number
GitHub参考URL https://github.com/rajaramtt/jquery-input-mask-phone-number
我相信这可能有用。
$(function(){ $('#call_caller_phone').keyup(function() { this.value = this.value.replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'); //alert ("OK"); }); });
#call_caller_phone { color: #fff; background-color: #ccc; }
function phoneMask() { num = $(this).val().replace(/\D/g,''); $(this).val(num.substring(0,3) + '-' + num.substring(3,6) + '-' + num.substring(6,10)); } $('[type="tel"]').keyup(phonemask)
工作原理：拿电话号码，摆脱任何非数字字符。 然后，取前3个数字，添加短划线，接下来的3个，添加短划线，然后选择接下来的4个。
我将选择器更改为[type="tel"]因为您应该将输入类型设置为tel以获取电话号码，然后此function将其应用于所有电话号码输入。 但如果这不符合您的需求，请将其更改回#call_caller_phone
这将只允许文本字段（和’ – ‘）中的数字输入，并且只允许美国电话号码的10位数（加2’）。 它也会在用户输入时插入破折号。 与最后完成整个事情相比，可能值得一看。 但是，还有很好的jquery库来处理输入掩码， 掩码输入插件 。
$('#phone').keyup(function(ev) { var key = ev.which; if (key < 48 || key > 57 || key != 45) { ev.preventDefault(); } if (this.value.length > 12) { this.value = this.value.slice(0, -1); return; } this.value = this.value.replace(/^(\d{3})(\d)/, '$1-$2') .replace(/^(\d{3}-\d{3})(\d)/, '$1-$2'); });