[SOLVED] How to create phone format input in HTML if it's possible with country code

How to create phone format input in HTML if it's possible with country code

I need a phone format input with a country code if it's possible i've tried few things but it didn't work so well this is my code

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

Solution

You can use intl-tel-input, a "JavaScript plugin for entering and validating international telephone numbers". Read this document to know more.

Below is an example, you can refer to it.

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

result: