如何使用 intl-tel-input 格式化数字？

Posted 2023-05-09

【中文标题】如何使用 intl-tel-input 格式化数字？

【英文标题】：How to format number using intl-tel-input?

【发布时间】：2019-05-28 10:36:56

【问题描述】：

我已经在我的index.html 中包含了intl-tel-input js & css 库：

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

我有另一个名为app.js 的文件，其中我在用户输入textbox 时格式化数字：

window.intlTelInputGlobals.loadUtils(_TEL_INPUT_UTILS).then(function(x, y)

var pn = $("#phone_number")[0];
var iti = intlTelInput(pn,
    nationalMode: false,
    initialCountry: 'US'
)
var handleChangeVerification = function() 
if(iti.getNumber() )
    iti.setNumber(iti.getNumber());
;
pn.addEventListener('change', handleChangeVerification);
pn.addEventListener('keyup', handleChangeVerification);

变量_TEL_INPUT_UTILS 引用了intl-tel-input 的实用程序脚本，加载后我尝试在text box 中格式化数字。

此代码位于：

$(document).ready(function()
   //...
)

现在我在app.js 中有一个位于loadUtils 之外的代码，我想在变量中格式化该数字。

当我调用相同的loadUtils 时，我收到以下错误：

jQuery.Deferred exception: window.intlTelInputGlobals.loadUtils(...) is null my_scpecific_funcation@webpack:///./src/app.js?:258:13

问题是如何格式化变量内的数字？我每次都需要使用loadUtils吗？整个过程有没有更好的方法？

【参考方案1】：

我不知道的是，当您使用loadUtils 时，它将被加载并且您可以访问它。

所以我就直接使用了下面的代码：

intlTelInputUtils.formatNumber(my_number_var, null, intlTelInputUtils.numberFormat.INTERNATIONAL);