国际电话输入号码格式化方式?
International Telephone Input number formatting way around?
据我所知,他们已经删除了最新国际电话输入 library.This 选项中的自动格式选项,该选项根据用户选择的国家/地区格式化号码。但根据表格,我仍然可以使用 util.js 和格式数字功能来实现此选项 (https://github.com/jackocnr/intl-tel-input/wiki/utils.js) 我尝试了多次但无法应用此选项。例如,对于美国号码,我如何将号码格式化为这个 ex:(201)-255-6655。这是我下面的代码。正如我所见,这似乎是最好的国际号码 js 库。
$( document ).ready(function() {
$('#contactForm')
.find('[name="phoneNumber"]')
.intlTelInput({
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/utils.js",
autoPlaceholder: true,
initialCountry:"us",
geoIpLookup:"auto",
});
});
<!DOCTYPE html>
<html>
<head>
<title>Phone</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/css/intlTelInput.css">
<link rel="stylesheet" href="./intlmask.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/utils.js"></script>
<script src="./intlmask.js"></script>
</head>
<body>
<form id="contactForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Phone number</label>
<div class="col-xs-5">
<input type="tel" class="form-control" name="phoneNumber" />
</div>
</div>
</form>
</body>
</html>
像这样
所以我基本上添加了一个函数,运行 当用户关注输入时它。 utils.js 已经为我们提供了格式化 (intlTelInputUtils.formatNumber)。我们只需要将号码和国家 code/initial 传递给它。检查下面的代码
function test(){
var number = $('input[name="phoneNumber"]').val();
var classf = $(".selected-flag > div").attr("class");
var flag = classf.slice(-2);
console.log("check number: ", number);
console.log("check classf: ", classf);
console.log("check flag: ", flag);
var formattedNumber = intlTelInputUtils.formatNumber(number, flag, intlTelInputUtils.numberFormat.INTERNATIONAL);
$('input[name="phoneNumber"]').val(formattedNumber);
}
function phoneFormatter() {
$('.phone').on('input', function() {
var number = $(this).val().replace(/[^\d]/g, '')
if (number.length == 7) {
number = number.replace(/(\d{3})(\d{4})/, "-");
//US & Canada Formatting
} else if (number.length == 10) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "() -");
}
//France Formatting
else if (number.length == 11) {
number = number.replace(/(\d{2})(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/, "+ ");
}
//German Formattiing
else if (number.length == 13) {
number = number.replace(/(\d{2})(\d{3})(\d{8})/, "+ ");
}
$(this).val(number)
});
};
$(phoneFormatter);
<script type="text/javascript” src=”/_layouts/MicrosoftAjax.js" ></script>
<script type="text/javascript” src=”/_layouts/SP.debug.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/8.2.0/validator.js"></script>
<html>
<body>
<p><label>Phone Number<br>
<input name="phone" class="phone" id="phone" type="text" required></label></p>
</body>
</html>
据我所知,他们已经删除了最新国际电话输入 library.This 选项中的自动格式选项,该选项根据用户选择的国家/地区格式化号码。但根据表格,我仍然可以使用 util.js 和格式数字功能来实现此选项 (https://github.com/jackocnr/intl-tel-input/wiki/utils.js) 我尝试了多次但无法应用此选项。例如,对于美国号码,我如何将号码格式化为这个 ex:(201)-255-6655。这是我下面的代码。正如我所见,这似乎是最好的国际号码 js 库。
$( document ).ready(function() {
$('#contactForm')
.find('[name="phoneNumber"]')
.intlTelInput({
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/utils.js",
autoPlaceholder: true,
initialCountry:"us",
geoIpLookup:"auto",
});
});
<!DOCTYPE html>
<html>
<head>
<title>Phone</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/css/intlTelInput.css">
<link rel="stylesheet" href="./intlmask.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.5/js/utils.js"></script>
<script src="./intlmask.js"></script>
</head>
<body>
<form id="contactForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Phone number</label>
<div class="col-xs-5">
<input type="tel" class="form-control" name="phoneNumber" />
</div>
</div>
</form>
</body>
</html>
像这样
所以我基本上添加了一个函数,运行 当用户关注输入时它。 utils.js 已经为我们提供了格式化 (intlTelInputUtils.formatNumber)。我们只需要将号码和国家 code/initial 传递给它。检查下面的代码
function test(){
var number = $('input[name="phoneNumber"]').val();
var classf = $(".selected-flag > div").attr("class");
var flag = classf.slice(-2);
console.log("check number: ", number);
console.log("check classf: ", classf);
console.log("check flag: ", flag);
var formattedNumber = intlTelInputUtils.formatNumber(number, flag, intlTelInputUtils.numberFormat.INTERNATIONAL);
$('input[name="phoneNumber"]').val(formattedNumber);
}
function phoneFormatter() {
$('.phone').on('input', function() {
var number = $(this).val().replace(/[^\d]/g, '')
if (number.length == 7) {
number = number.replace(/(\d{3})(\d{4})/, "-");
//US & Canada Formatting
} else if (number.length == 10) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "() -");
}
//France Formatting
else if (number.length == 11) {
number = number.replace(/(\d{2})(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/, "+ ");
}
//German Formattiing
else if (number.length == 13) {
number = number.replace(/(\d{2})(\d{3})(\d{8})/, "+ ");
}
$(this).val(number)
});
};
$(phoneFormatter);
<script type="text/javascript” src=”/_layouts/MicrosoftAjax.js" ></script>
<script type="text/javascript” src=”/_layouts/SP.debug.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/8.2.0/validator.js"></script>
<html>
<body>
<p><label>Phone Number<br>
<input name="phone" class="phone" id="phone" type="text" required></label></p>
</body>
</html>