html input phone number code example
Example 1: html telephone link
One click should open the phone dialler and input the number to be called.
<a href="tel:5551234567">Call (555)123-4567</a>
Example 2: html textbox pattern mobile number
<input type="text" name="Phone Number" pattern="[7-9]{1}[0-9]{9}"
title="Phone number with 7-9 and remaing 9 digit with 0-9">
Example 3: phone number input
JS Libraries required :
======================
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.7/js/intlTelInput.js
Inside JS File :
================
$("input").intlTelInput({
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.6/js/utils.js"
});
Inside HTML File :
===================
<h1>International Telephone Input - BOOTSTRAP INPUT GROUP</h1>
<form>
<div class="input-group">
<input type="tel" class="form-control">
<span class="input-group-addon">Tel</span>
</div>
<br>
<div class="input-group">
<input type="tel" class="form-control">
<span class="input-group-addon">Tel</span>
</div>
</form>
Inside Css File :
=================
body {
margin: 20px;
}
form {
width: 300px;
}
.intl-tel-input {
display: table-cell;
}
.intl-tel-input .selected-flag {
z-index: 4;
}
.intl-tel-input .country-list {
z-index: 5;
}
.input-group .intl-tel-input .form-control {
border-top-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0;
}
Example 4: javascript phone number input
function phonenumber(inputtxt)
{
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if((inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("message");
return false;
}
}