无法集成 intl-tel-input - window.intlTelInput 不是函数

Posted 2023-05-09

【中文标题】无法集成 intl-tel-input - window.intlTelInput 不是函数

【英文标题】：Unable to integrate intl-tel-input - window.intlTelInput is not a function

【发布时间】：2020-10-19 20:24:32

【问题描述】：

我正在尝试集成 intl-tel-input 以支持我网站上 html 表单中的电话号码输入字段。我使用 npm 安装了包，我的代码看起来像 -

HTML 文件 (index.html)

head 标签内

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="node_modules/intl-tel-input/build/css/intlTelInput.css">

身体顶部

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="node_modules/intl-tel-input/build/js/intlTelInput.js"></script>

表单部分

<div class="row">
          <form class="early-access-form" action="/early-access" method="post">

            <input type="text" name="firstName" placeholder="First Name" class="form-field col-lg-2">

            <input type="text" name="lastName" placeholder="Last Name" class="middle-field col-lg-2">

            <input type="text" name="companyName" placeholder="Company Name" class="middle-field col-lg-2">

            <input type="tel" id="phone">

            <script>

            var input = document.querySelector("#phone");
            var iti = window.intlTelInput(input, 
              separateDialCode:true,
              utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js",

            );

            </script>

            <input type="email" name="email" placeholder="Email" class="bottom-field col-lg-2">

            <button class="btn btn-outline-light form-button col-lg-2" type="submit" name="submit">Sign me up!</button>

          </form>
        </div>

当我在浏览器中打开文件时，这似乎工作正常。表单截图 -

Screenshot of browser when I open the file from my system.

但是，通过 Firebase 托管进行部署后，这似乎会中断，并且相同的形式看起来像 -

Screenshot of webpage

根据 DevTools 控制台，错误是 - 'window.intlTelInput is not a function'

我已经针对同一个错误检查了多个解决方案，但我无法使其正常工作。有人可以指出错误，为什么会发生？

【参考方案1】：

你需要 intlTelInput-jquery.min.js