如何使用intl-tel-input显示手机号输入框的占位示例号码

我想在tel类型输入框的占位符中显示带格式的国家码+对应示例手机号，但目前仅能显示国家码。尝试过formatNumber和getNumber方法，其中getNumber对所有选中国家仅返回'-99'，希望实现类似截图的占位符格式（例如巴西地区显示+55 99 99999-9999）。

原HTML代码 #

<input type="tel" name="celular" class="form-control input-telefone" 
       placeholder="<?php echo site_phrase('celular'); ?>"
       aria-label="<?php echo site_phrase('celular'); ?>"
       aria-describedby="selected-country-code" id="celular" required 
       style="border-top-left-radius: 0px;padding-left: 60px;border-bottom-left-radius: 0px;">

原JS代码 #

$(document).ready(function () {
  const input = document.getElementById("celular"); 
  const iti = intlTelInput(input, {
    initialCountry: "br",
    placeholderNumberType: "MOBILE",
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js",
  });

   input.addEventListener("countrychange", function (event) {
        const countryData = iti.getSelectedCountryData();
        const numberType = iti.getNumberType();

        input.placeholder = "+" + countryData.dialCode + " " + iti.getNumberType();
        $("#selected-country-code").text("+" + countryData.dialCode);
    });

    input.addEventListener("input", function (event) {
        // 额外格式化逻辑
    });
});

依赖资源 #

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.min.css">

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput-jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js"></script>

问题核心是误用了getNumberType方法——它返回的是号码类型的枚举值（如0代表固定电话、1代表移动电话），并非示例号码。以下两种方法可实现需求：

方法1：使用组件内置的getPlaceholderNumber方法 #

直接调用iti.getPlaceholderNumber()即可获取当前国家对应类型的格式化示例号码，自动包含国家码和正确格式：

$(document).ready(function () {
  const input = document.getElementById("celular"); 
  const iti = intlTelInput(input, {
    initialCountry: "br",
    placeholderNumberType: "MOBILE",
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js",
  });

  // 初始化时设置占位符
  input.placeholder = iti.getPlaceholderNumber();
  $("#selected-country-code").text("+" + iti.getSelectedCountryData().dialCode);

  input.addEventListener("countrychange", function (event) {
    input.placeholder = iti.getPlaceholderNumber();
    $("#selected-country-code").text("+" + iti.getSelectedCountryData().dialCode);
  });
});

方法2：用utils.js工具函数手动生成示例号 #

若需自定义格式，可通过intlTelInputUtils的工具函数生成并格式化示例号：

$(document).ready(function () {
  const input = document.getElementById("celular"); 
  const iti = intlTelInput(input, {
    initialCountry: "br",
    placeholderNumberType: "MOBILE",
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js",
  });

  // 初始化时设置占位符
  const initCountryData = iti.getSelectedCountryData();
  const initExample = intlTelInputUtils.getExampleNumber(initCountryData.iso2, true, iti.options.placeholderNumberType);
  const initFormatted = intlTelInputUtils.formatNumber(initExample, initCountryData.iso2, intlTelInputUtils.numberFormat.INTERNATIONAL);
  input.placeholder = initFormatted;
  $("#selected-country-code").text("+" + initCountryData.dialCode);

  input.addEventListener("countrychange", function (event) {
    const countryData = iti.getSelectedCountryData();
    const exampleNumber = intlTelInputUtils.getExampleNumber(countryData.iso2, true, iti.options.placeholderNumberType);
    const formattedNumber = intlTelInputUtils.formatNumber(exampleNumber, countryData.iso2, intlTelInputUtils.numberFormat.INTERNATIONAL);
    input.placeholder = formattedNumber;
    $("#selected-country-code").text("+" + countryData.dialCode);
  });
});

关键注意事项 #

• 确保utilsScript正确加载，示例号码生成依赖该脚本；
• 不要用getNumber()获取示例号，它仅用于读取用户输入的号码，空输入时会返回无效值；
• 初始化阶段必须设置一次占位符，避免页面加载后显示默认的PHP文本。

内容的提问来源于stack exchange，提问作者awayluk