如果可以使用国家代码，如何在 HTML 中创建电话格式输入

Question

如果可能的话，我需要一个带有国家代码的电话格式输入

<div class="form-group ">
    <input class="form-control form-control-sm"  placeholder="@localizer["MobilePhone"]" id="inpMobilePhone" name="MobilePhone"  required />
    @*<label asp-for="ERPId" class="control-label col-form-label-sm">@localizer["ERPId"]</label>*@
    @*<input asp-for="ERPId" class="form-control form-control-sm" />*@
    @*<span asp-validation-for="ERPId" class="text-danger"></span>*@
</div>

Answer 1

嗨，我发现这个 w3school 帖子解释了它。 但并非所有浏览器都支持它。

https://www.w3schools.com/tags/att_input_type_tel.asp#:~:text=The%20%3Cinput%20type%3D%22tel,tag%20for%20best%20accessibility%20practices

所说的基本上是使用带有模式的“tel”类型来执行通常的电话格式（444-353-56-33）。

Answer 2

您可以使用intl-tel-input ，一个“用于输入和验证国际电话号码的 JavaScript 插件”。 阅读此文档以了解更多信息。

下面是一个例子，大家可以参考。

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>International telephone input</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <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>
 </head>
 <body>
   <input id="phone" type="tel" name="phone" />
 </body>
  <script>
   const phoneInputField = document.querySelector("#phone");
   const phoneInput = window.intlTelInput(phoneInputField, {
     utilsScript:
       "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
   });
 </script>
</html>

结果：

如果可以使用国家代码，如何在 HTML 中创建电话格式输入

问题描述

2 个解决方案

解决方案1
1 2022-07-27 08:25:27

解决方案2
0 2022-07-27 10:10:41

如果可以使用国家代码，如何在 HTML 中创建电话格式输入

问题描述

2 个解决方案

解决方案1 1 2022-07-27 08:25:27

解决方案2 0 2022-07-27 10:10:41

解决方案1
1 2022-07-27 08:25:27

解决方案2
0 2022-07-27 10:10:41