3

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

HTML 文件 (index.html)

内头标签

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

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

当我从系统打开文件时浏览器的屏幕截图。

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

网页截图

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

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

4

1 回答 1

0

你需要 intlTelInput-jquery.min.js

于 2021-07-23T01:39:58.570 回答