javascript - 用 HTML 读取国际电话
问题描述
我试图让用户以 HTML 形式输入国际电话号码,因为我必须使用 JavaScript。我不知道 JS,但是在关注了一个在线博客之后,我设法覆盖了一些距离。但是当我试图读取电话字段时,它显示的是变量名而不是值。我认为问题出在这行代码上,特别是const phoneNumber = phoneInput.getNumber();
IDE 说它是一个未解决的函数。
下面是我的文件
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--International phone input field-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<!-- Bootstrap CSS -->
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.1/css/bootstrap.min.css} " />
<!-- font awesome-->
<link th:rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.css} " />
<!-- local css file-->
<link href="/static/css/register_login.css" rel="stylesheet" th:href="@{/css/register_login.css}" />
<title>Easy Notifications App</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-9 mx-auto">
<div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
<div class="card-img-left d-none d-md-flex">
<!-- Background image for card set in CSS! -->
</div>
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>
<form id="login" onsubmit="process(event)" action="#" th:action="@{/register}" th:object="${registerDto}" method="post">
<div class="form-floating mb-3">
<input type="text" th:field="*{firstName}" class="form-control" id="floatingInputfirstName" placeholder="First Name" autofocus>
<label for="floatingInputfirstName">First Name</label>
</div>
<div class="form-floating mb-3">
<input type="text" th:field="*{lastName}" class="form-control" id="floatingInputlastName" placeholder="Last Name">
<label for="floatingInputlastName">Last Name</label>
</div>
<div class="form-floating mb-3">
<input type="tel" class="form-control" id="tel" th:field="*{mobileNumber}" placeholder="Mobile Number">
<label for="tel"></label>
</div>
<div class="d-grid mb-2">
<button class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit">
Register
</button>
</div>
</form>
<div class="alert alert-info" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
<!-- Initialize the phone plugin -->
const phoneInputField = document.querySelector("#tel");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = 'Phone number in E.164 format: <strong>${phoneNumber}</strong>';
}
</script>
</html>
这是错误消息的图片
请帮忙。
解决方案
尝试过并与
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
推荐阅读
- osgi - 为什么 Findbugs JSR305 会破坏 RedHat/JBoss Fuse 6.3.0 中 javax.annotations 的 OSGi 包导出?
- django - 在一次 API 调用中创建具有相同外键对象的多个 django 对象
- javascript - 包含标头会导致不发送请求
- python-3.x - python tk tkinter 多个小部件超出了我的可滚动框架
- python - 如何映射到熊猫字典中的多个值
- docker - 在本地环境中运行 testcontainer test OK 但在 jenkins 中失败
- python - 我想知道 b[...] 在 python 中的含义
- java - 给定排序列表如何创建在 O(log(N)) 时间内不会落在特定范围内的整数列表?
- java - 让每个用户都有自己的 UserTransaction
- python - sklearn:使用 ColumnTransformer 链接多个转换器