如何在intlTelInput JavaScript插件中添加自定义占位符图标

要实现默认显示自定义圆形图标、切换国家后仍保留该图标的需求，直接修改customPlaceholder函数即可，同时给输入框添加初始占位符保证加载前的显示效果：

HTML 代码 #

<input type="tel" id="phone" placeholder="● 请输入手机号">

JavaScript 代码 #

var input = document.querySelector("#phone");
window.intlTelInput(input, {
  separateDialCode: true,
  utilsScript: "../scripts/utils.js",
  customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
    // 将自定义圆形图标添加到示例号码前
    return "● e.g. " + selectedCountryPlaceholder;
  },
  // 可选：可指定初始国家，或开启自动识别
  initialCountry: "cn"
});

补充说明 #

• 示例中使用Unicode圆形符号●作为自定义图标，你可以替换成自己的图标（比如字体图标对应的Unicode编码）
• 每次切换国家时，customPlaceholder函数都会重新生成带图标的占位符文本，确保图标不会消失
• 给input设置初始占位符，是为了在插件未完成加载时，用户也能看到图标，保证体验连贯性

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