如何通过IP定位国家下拉框展示国旗、国名及国家代码实现电话输入功能

云原生阿岚

2026-10-9

国际电话输入字段实现方案

你需要的两个功能可以直接基于intlTelInput jQuery插件实现，该插件原生支持国旗展示、国家代码自动填充能力，无需额外开发自定义逻辑。

功能需求

国家下拉框展开时，同步展示对应国家的国旗与国家名称
选中对应国家后，将该国国家代码自动填充到后续文本框中

预期效果

效果示例图

完整实现代码

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jquery-az.com/jquery/js/intlTelInput/intlTelInput.js"></script>
<link href="https://www.jquery-az.com/jquery/css/intlTelInput/demo.css" rel="stylesheet" />
<link href="https://www.jquery-az.com/jquery/css/intlTelInput/intlTelInput.css" rel="stylesheet" />

<h1>IP自动定位演示</h1>
<form style="margin-left:150px;">
  <input type="tel" id="mobile-number" placeholder="示例：+1 702 123 4567">
</form>

JS初始化配置

$("#mobile-number").intlTelInput({
  // 初始国家默认自动根据IP定位
  initialCountry: "auto",
  // IP定位逻辑，调用ipinfo.io接口获取用户所在国家
  geoIpLookup: function(callback) {
    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  // 工具类JS，用于号码格式化、占位符生成等功能
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"
});