时间戳

首页 > 解决方案 > 无法使用 intl-tel-input 和 webform 获取国际号码

webforms - 无法使用 intl-tel-input 和 webform 获取国际号码

问题描述

使用 intl-tel-input 和 webform 输入国际号码让我非常头疼

我在这里得到了文档：https ://github.com/jackocnr/intl-tel-input

提到我可以使用“separateDialCode”获得国际号码。

separateDialCode 类型：布尔默认值：false 在所选标志旁边显示国家/地区拨号代码，因此它不是键入号码的一部分。请注意，这将禁用nationalMode，因为从技术上讲，我们正在处理国际号码，但拨号代码是分开的。

但是，只发布了一个国家号码。

这里我的代码包含在我的 webform 的 CSS / JavaScript 配置中。

Drupal.webform = Drupal.webform || {};
Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
Drupal.webform.intlTelInput.options = {
  preferredCountries: ['fr'],
  separateDialCode: true,
  autoPlaceholder: "aggressive",
  formatOnDisplay: true,
};

我得到了单独的代码显示，验证工作，但在我的表单输入中没有国际代码存储。

我确实尝试了 hiddeninput，但我不理解将完整数字存储在 hiddenInput 选项中的逻辑，如果它已经由图书馆管理:(。与强制 nationalMode:False 相同。

在这张图片上，我得到的唯一结果是“782828282”，而不是“+33782828282”

任何人 ？

干杯，

标签： webformsdrupal-8intl-tel-input

解决方案

我使用了以下格式，示例基于我在做什么

<div class="row">
 <asp:Label ID="lblPhone" CssClass="lbl" runat="server" Text="Telephone *">
 </asp:Label><asp:TextBox ID="txtPhone" CssClass="rg-txt rg-phone-txt" runat="server"></asp:TextBox>
 <asp:TextBox ID="txtCountryCode" style="display:none;" Text="" runat="server"></asp:TextBox>
 <asp:CustomValidator ID="cvPhone" ErrorMessage="*" CssClass="validate v-phone-txt" ClientValidationFunction="ValidatePhone" ValidationGroup="vg" runat="server" />
</div>



    $("#MainContent_txtPhone").intlTelInput({
        preferredCountries: ['us'],
        utilsScript: "../../Scripts/libphonenumber/utils.js"

    });

    setTimeout(function () {
         $("#MainContent_cvPhone").appendTo(".intl-tel-input");
    }, 5000);

在表单验证期间，我将国家/地区的值分配给txtCountryCode $("#MainContent_txtCountryCode").val(country);

从后面的代码中，我在前端获得国家代码和电话号码，我只显示Country Flag + Phone number。

希望这会有所帮助，我在使用母版页时遇到了运行此脚本的问题，如果没有放置在正确的位置，脚本将无法正常工作。如果您不使用母版页方法，那么它应该不是那么大的问题。

我不记得我是否有与您面临的类似问题，因为我几乎 2 年前没有这份工作

推荐阅读