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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42982494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:19:19  来源:igfitidea点击:

How to put country dial code in intlTelInput in brackets

jqueryintl-tel-input

提问by Pawel Novikov

I'm using intlTelInput on my site. How can I separate dial code using brackets. For ex. default output of this plugin is +1202someNumber and I need (+1)202someNum?

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

回答by Manuel Che?a

Based on the docs form here - https://github.com/Hymanocnr/intl-tel-input- you would need something like this:

基于此处的文档表单 - https://github.com/Hymanocnr/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

回答by Chandra Kumar

Just use this code to get country code from phone number:

只需使用此代码即可从电话号码中获取国家/地区代码:

You can use var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;

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

Here is demo: https://output.jsbin.com/cuvoqagotu

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

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

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

HTML:

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:

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);

回答by ravi kumar

this give you country code

这给你国家代码

exmaple :

例子:

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

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

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

回答by Roy Shoa

You don't add the country phone code directly to the input, you just attache it when the user submit the form or save it in another hidden input and attache it on you server side:

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

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/hidden-input.html?phone=32445&phone-full=%2B132445

You can also display it to the users so they will understand they don't need to type it when they typing:

您还可以将其显示给用户,以便他们在键入时了解不需要键入它:

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

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