国际电话输入是一个有用的JavaScriptjQuery将标准输入转换为带有国旗下拉列表的国际电话输入的插件。

单击下拉列表时，会在其国旗旁边列出所有国家/地区及其国际拨号代码。非常适合您网站的国际访问者。

参见：

• 7个最佳jQuery电话号码插件

基本用法：

1.在页面的标题部分包含所需的intlTelInput.css。

<link rel="stylesheet" href="build/css/intlTelInput.css">

2.创建一个标准的电话输入字段。

<input type="tel" id="demo" placeholder="" id="telephone">

3.在页面底部包含国际电话输入插件。

<!-- Use as a Vanilla JS plugin -->
<script src="build/js/intlTelInput.min.js"></script> 

<!-- Use as a jQuery plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="build/js/intlTelInput-jquery.min.js"></script> 

4.初始化插件，我们就完成了。

// Vanilla Javascript
var input = document.querySelector("#telephone");
window.intlTelInput(input,({
  // options here
}));

// jQuery 
$("#telephone").intlTelInput({
  // options here
});

5.自定义插件的所有默认选项。

// whether or not to allow the dropdown
allowDropdown: true,

// when enabled (requires nationalMode to be disabled), the international dial code will be automatically inserted into the input in 3 situations: (A) upon initialisation, and (B) when the user selects a country from the dropdown, and (C) upon calling setCountry. Additionally, the plugin will listen for blur/submit events, and if the input only contains a dial code, it will automatically be removed to avoid submitting just that.
autoInsertDialCode: true,

// add a placeholder in the input with an example number for the selected country
autoPlaceholder: "polite",

// modify the auto placeholder
customPlaceholder: null,

// append menu to specified element
dropdownContainer: null,

// don't display these countries
excludeCountries: [],

// format the input value during initialisation and on setNumber
formatOnDisplay: true,

// geoIp lookup function
geoIpLookup: null,

// inject a hidden input with this name, and on submit, populate it with the result of getNumber
hiddenInput: "",

// initial country
initialCountry: "",

// localized country names e.g. { 'de': 'Deutschland' }
localizedCountries: null,

// don't insert international dial codes
nationalMode: true,

// display only these countries
onlyCountries: [],

// number type to use for placeholders
placeholderNumberType: "MOBILE",

// the countries at the top of the list. defaults to united states and united kingdom
preferredCountries: [ "us", "gb" ],

// display the country dial code next to the selected flag so it's not part of the typed number
separateDialCode: false,

// show/hide the flags
showFlags: true,

// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: ""

6.API方法。

// destroy
instance.destroy();

// Get the extension part of the current number
var extension = instance.getExtension();

// Get the current number in the given format
var intlNumber = instance.getNumber();

// Get the type (fixed-line/mobile/toll-free etc) of the current number. 
var numberType = instance.getNumberType();

// Get the country data for the currently selected flag.
var countryData = instance.getSelectedCountryData();

// Get more information about a validation error. 
var error = instance.getValidationError();

// Validate the current number
var isValid = instance.isValidNumber();

// Change the country selection
instance.selectCountry("gb");

// Insert a number, and update the selected flag accordingly.
instance.setNumber("+44 7733 123 456");

// Change the placeholderNumberType option.
instance..setPlaceholderNumberType("FIXED_LINE");

// Load the utils.js script (included in the lib directory) to enable formatting/validation etc.
window.intlTelInputGlobals.loadUtils("build/js/utils.js");

// Get all the country data
var countryData = window.intlTelInputGlobals.getCountryData();

7.事件处理程序。

input.addEventListener("countrychange", function() {
  // do something with iti.getSelectedCountryData()
});

input.addEventListener("open:countrydropdown", function() {
  // triggered when the user opens the dropdown
});

input.addEventListener("close:countrydropdown", function() {
  // triggered when the user closes the dropdown
});

更新日志：

v18.1.4 (2023-04-21)

• 使现代化

v18.1.3 (2023-04-15)

• 使现代化

v18.1.1 (2023-04-13)

• 简化nationalMode选项。此前，当nationalMode设置为false时，该插件不必要地为在两种情况下键入有效国家号码的用户创建了更糟糕的用户体验：（1）如果您键入不同的区号（以国家格式），它不会更新NANP国家之间的标志，（2）对于有效的国家号码，isValidNumber将返回false。

v18.1.0版本（2023-04-10）

• 添加showFlags选项

v18.0.0版本（2023-04-07）

• 删除autoHideDialCode选项以支持新的autoInsertDialCode选择
• 允许nationalMode与separateDialCode一起使用

v17.0.21版本（2023-03-10）

• 在data.js中更新北马其顿

v17.0.19 (2022-09-14)

• 正在将libphonenumber更新到版本v8.12.54

v17.0.18 (2022-07-16)

• 使现代化

v17.0.17 (2022-05-31)

• 使现代化

v17.0.16 (2022-03-15)

• 使现代化

v17.0.15 (2021-11-30)

• 使现代化

v17.0.13 (2021-05-30)

• 使现代化

v17.0.12 (2021-02-14)

• 使现代化

v17.0.11 (2021-02-08)

• 使现代化

v17.0.10 (2021-02-07)

• 使现代化

v17.0.8 (2020-10-21)

• 使现代化

v17.0.6 (2020-10-08)

• 使现代化

v17.0.5 (2020-09-21)

• 使现代化

v17.0.2 (2020-05-25)

• 使现代化

v17.0.0版本（2020-04-19）

• 更新utils.js中的validationError枚举，以匹配最新版本的libphonenumber
• 将ID属性更改为唯一（两者都在下拉列表中，例如首选部分中的欺骗国家/地区，以及插件的多个实例）

v16.1.0 (2020-04-11)

• 使现代化

v16.0.15 (2020-04-05)

• 使现代化

v16.0.14 (2020-04-03)

• 使现代化

v16.0.11 (2020-02-13)

• 使现代化

v16.0.10 (2020-02-10)

• 使现代化

v16.0.8 (2019-11-29)

• 使现代化

v16.0.7 (2019-10-25)

• 使现代化

v16.0.6版本（2019-10-21）

• 添加对IE的带箭头的导航支持

v16.0.5 (2019-10-10)

• 使现代化

v16.0.4（2019年9月23日）

• 使现代化

v16.0.3版本（2019-09-01）

• 使现代化

v16.0.2版本（2019-07-08）

• 修复了IE11中无效的“remove”函数的问题。

v16.0.1版本（2019-07-04）

• 已更新

v16.0.0版本（2019-06-24）

• 将CSS类名切换为使用BEM，因此您不应该再与“highlight”之类的泛型类名发生冲突。
• 所有NANP国家现在只有+1作为其拨号代码，而有些国家过去包括区号，例如巴巴多斯过去的拨号代码是+1246，现在只有+1。

v15.1.2（2019年6月17日）

• 修复：getNumber有时只返回拨号代码

v15.1.0（2019年5月23日）

• 辅助功能：重点突出显示的列表项

v15.0.1版本（2019-03-04）

• 使现代化

v15.0.0版本（2019-02-11）

• 更改autoHideDialCode选项的行为

v14.1.0 (2019-02-10)

• 添加了getInstance静态方法

v14.0.10 (2019-02-06)

• 使现代化

v14.0.9 (2019-02-05)

• 使现代化

v14.0.8 (2019-01-28)

• 使现代化

v14.0.7 (2019-01-07)

• 使现代化

v14.0.6（2018年11月21日）

• 使现代化

v14.0.5 (2018-11-08)

• 使现代化

v14.0.4 (2018-11-02)

• 使现代化

v14.0.3 (2018-10-07)

• 使现代化

v14.0.2（2018年9月26日）

• 使现代化

v13.0.4 (2018-09-14)

• 使现代化

v13.0.3（2018年8月25日）

• 使现代化

v12.4.0（2018年6月24日）

• 使现代化

v12.3.0 (2018-06-11)

• 使现代化

v10.0.1（2016年12月15日）

• 将numberType选项重命名为占位符numberType
• 将formatOnInit重命名为formatOnDisplay

v9.2.7（2016年12月08日）

• 单独的allowDropdown和separateDialCode选项
• 使默认对象可以从外部访问
• 错误修正

v9.2.6（2016年12月03日）

• 使现代化

v9.2.5（2016年12月01日）

• 修复问题：libphonenumber方法期望NANP号码包括区号

版本9.2.4（2016-11-01）

• 单独的allowDropdown和separateDialCode选项

v9.2.3（2016年10月12日）

• 单独的allowDropdown和separateDialCode选项
• 使默认对象可以从外部访问
• 错误修正

 

预览截图

带标志和拨号代码 国际电话输入