javascript jquery国际电话号码输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28882944/
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
Jquery International Telephone number input
提问by Abhishek Singh
I am trying to follow jquery tutorial on http://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.htmlto create input type number with country code in a form. However, in my case though flag is appearing to change, the country code is not added inside the input field as they show in the demo.
我正在尝试按照http://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html上的jquery 教程在表单中创建带有国家/地区代码的输入类型编号。但是，在我的情况下，虽然标志似乎发生了变化，但国家代码并未添加到输入字段中，如演示中所示。
Following is the code they have provided:
以下是他们提供的代码：
<head>
<meta charset="utf-8">
<title>International Telephone Input</title>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
</head>
<body>
<form>
<input id="mobile-number" type="tel">
<button type="submit">Submit</button>
</form>
<!-- Load jQuery from CDN so can run demo immediately -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.js"></script>
<script>
$("#mobile-number").intlTelInput({
//allowExtensions: true,
//autoFormat: false,
//autoHideDialCode: false,
//autoPlaceholder: false,
//defaultCountry: "auto",
//ipinfoToken: "yolo",
//nationalMode: false,
//numberType: "MOBILE",
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
//preferredCountries: ['cn', 'jp'],
//preventInvalidNumbers: true,
utilsScript: "lib/libphonenumber/build/utils.js"
});
</script>
Here is the link where I am trying to implement it: https://www.easyaccom.com/mobile/verifynumber.html
这是我尝试实现它的链接：https: //www.easyaccom.com/mobile/verifynumber.html
I have tried changing the commented out options in script but it doesn't help.
我曾尝试更改脚本中注释掉的选项，但没有帮助。
回答by Abhishek Singh
Ok I solved this problem.
So basically here are the option fields that must be true and we need to place the below script before </head>tag.
好的，我解决了这个问题。所以基本上这里是必须为真的选项字段，我们需要将下面的脚本放在</head>标签之前。
Script:
脚本：
<script>
$(function() {
$("#mobile-number").intlTelInput({
allowExtensions: true,
autoFormat: false,
autoHideDialCode: false,
autoPlaceholder: false,
defaultCountry: "auto",
ipinfoToken: "yolo",
nationalMode: false,
numberType: "MOBILE",
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
//preferredCountries: ['cn', 'jp'],
preventInvalidNumbers: true,
utilsScript: "lib/libphonenumber/build/utils.js"
});
});
</script>
Place it before closing head tag and remember to call $("#mobile-number").intlTelInput();as it is important.
将它放在关闭 head 标签之前并记住调用，$("#mobile-number").intlTelInput();因为它很重要。
回答by ErasmoOliveira
You just forget to put your jquery code inside de document.ready.
您只是忘记将 jquery 代码放在 de document.ready 中。
see below:
见下文：
$(document).ready(function(){
$("#mobile-number").intlTelInput({
//allowExtensions: true,
//autoFormat: false,
//autoHideDialCode: false,
//autoPlaceholder: false,
//defaultCountry: "auto",
//ipinfoToken: "yolo",
//nationalMode: false,
//numberType: "MOBILE",
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
//preferredCountries: ['cn', 'jp'],
//preventInvalidNumbers: true,
utilsScript: "lib/libphonenumber/build/utils.js"
});
});
回答by Ahmer
Country code will always be in input field with this code
国家/地区代码将始终与此代码一起出现在输入字段中
$("#mobile-number").on("blur keyup change", function() {
if($(this).val() == '') {
var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode;
$(this).val('+'+getCode);
}});
$(document).on("click",".country",function(){
if($("#phone").val() == '') {
var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode;
$("#mobile-number").val('+'+getCode);
}});
回答by aniket bahadurkar
try this code
$("#mobile-number").intlTelInput({
// allowExtensions: true,
//autoFormat: false,
autoHideDialCode: false,
// autoPlaceholder: false,
// defaultCountry: "auto",
//ipinfoToken: "yolo",
nationalMode: false,
// numberType: "MOBILE",
// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
//preferredCountries: ['cn', 'jp'],
//preventInvalidNumbers: true,
utilsScript: "lib/libphonenumber/build/utils.js"
});
});
回答by Roma Asnani
$(function() {
$("#mobile-number").intlTelInput({
autoHideDialCode: false,
autoPlaceholder: false,
nationalMode: false
});
});回答by manish kumar
Why country flag and country code are not stable on page post back.
为什么国旗和国家代码在页面回发上不稳定。
Here is what I have tried so far:
这是我迄今为止尝试过的：
<script>
$(document).ready(function () {
$("#Phone").intlTelInput({
allowDropdown: true,
// autoHideDialCode: false,
// autoPlaceholder: "off",
// dropdownContainer: "body",
// excludeCountries: ["us"],
defaultCountry: "auto",
// formatOnDisplay: false,
//geoIpLookup: function (callback) {
// $.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
// var countryCode = (resp && resp.country) ? resp.country : "";
// callback(countryCode);
// });
//},
//initialCountry: "auto",
// nationalMode: false,
// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
// placeholderNumberType: "MOBILE",
// preferredCountries: ['in','pk', 'np','bd', 'us','bt','sg','lk','ny','jp','hk','cn'],
// separateDialCode: true,
utilsScript: "build/js/utils.js"
});
$("#Phone").on("countrychange", function (e, countryData) {
$("#hdnPhone").val(countryData.dialCode);
});
});
</script>
<script>
$(document).ready(function () {
$("#Phone").val('');
var HdnVal = $("#hdnPhone").val();
if (HdnVal != '') {
var countryData = $("#Phone").intlTelInput("getSelectedCountryData");
$("#hdnPhone").val(countryData.dialCode);
}
});
</script>
