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>
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>
- Which things have you tried? What didn't work with them? – Uwe Keim Commented Jul 27, 2022 at 7:10
- I've tried style="tel" and pattern="some numbers" but numbers past 11 char. and i couldn't see how to put country code.I am trying to do something like this (Country code) (555) 555 55 55 – Hamza Commented Jul 27, 2022 at 7:23
- You can try to use jQuery mask plugin, where you will define your wanted format: jQuery Mask Plugin – Justinas Commented Jul 27, 2022 at 7:27
2 Answers
Reset to default 13You 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:
I found this w3school post where it is explained. But it's won't be supported in all browsers.
https://www.w3schools.com/tags/att_input_type_tel.asp#:~:text=The%20%3Cinput%20type%3D%22tel,tag%20for%20best%20accessibility%20practices!
Basically it uses the type "tel" with a pattern to do the usual phone format (444-353-56-33).