如果可以使用國家代碼，如何在 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