如何将国家拨号代码放在 intlTelInput 中的括号中

Posted 2023-05-09

技术标签:

【中文标题】如何将国家拨号代码放在 intlTelInput 中的括号中【英文标题】：How to put country dial code in intlTelInput in brackets 【发布时间】：2017-08-16 09:18:47 【问题描述】：

我在我的网站上使用 intlTelInput。如何使用括号分隔拨号代码。例如。这个插件的默认输出是+1202someNumber，我需要(+1)202someNum？

【问题讨论】：

你能为此创建一个 Js Fiddle 吗？我们还需要检查 telinput 插件，看看它在函数中是否有任何信息，这将帮助我们找出是否需要切断字符串。这是该项目的官方页面-intl-tel-input.com 【参考方案1】：

根据此处的文档表格 - https://github.com/jackocnr/intl-tel-input - 你需要这样的东西：

var intlNumber = $("#phone").intlTelInput("getNumber"); // get full number eg +17024181234
var countryData = $("#phone").intlTelInput("getSelectedCountryData"); // get country data as obj 

 var countryCode = countryData.dialCode; // using updated doc, code has been replaced with dialCode
countryCode = "+" + countryCode; // convert 1 to +1

var newNo = intlNumber.replace(countryCode, "(" + coountryCode+ ")" ); // final version

【讨论】：

【参考方案2】：

只需使用此代码从电话号码中获取国家代码：

你可以使用var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;

这里是演示：https://output.jsbin.com/cuvoqagotu

https://jsbin.com/cuvoqagotu/edit?html,css,js

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<style>
 .hide 
    display: none;
 
</style>
</head>
<body>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">? Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
</body>
</html>

JS：

var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput(
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
);

var reset = function() 
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
;

// on blur: validate
telInput.blur(function() 
  reset();
  if ($.trim(telInput.val())) 
    if (telInput.intlTelInput("isValidNumber")) 
      validMsg.removeClass("hide");
      /* get code here*/
      var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
      alert(getCode);
     else 
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    
  
);

// on keyup / change flag: reset
telInput.on("keyup change", reset);

【讨论】：

【参考方案3】：

您不直接将国家/地区电话代码添加到输入中，您只需在用户提交表单时附加它或将其保存在另一个隐藏的输入中并将其附加到您的服务器端：

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/hidden-input.html?phone=32445&phone-full=%2B132445

您还可以将其显示给用户，以便他们在输入时明白他们不需要输入：

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/national-mode.html

【讨论】：

【参考方案4】：

这给你国家代码

示例：

$("#your input box id").intlTelInput("getSelectedCountryData")

// this give you object where dialCode property has country code,like below 

$("#ContactpermanentNumber").intlTelInput("getSelectedCountryData").dialCode

【讨论】：

【参考方案5】：

使用vanilla JS，你可以尝试如下：

var country_code = iti.getSelectedCountryData()["dialCode"];
var number_with_code = iti.getNumber();
var mod_number = "(" + number_with_code.substr(0, country_code.length + 1) + ")" + number_with_code.substr(country_code.length + 1);

第一行获取国家代码。第二行获取完整的号码以及国家/地区代码。

假设用户输入以下数字：