Phone Number Keyboard using HTML and jQuery

This article will understand how to create a Phone Number Keyboard using HTML and jQuery with examples. A keypad or phone number keyboard is a block of buttons set with a combination of digits, symbols, or alphabetical letters.

Following are the various examples of Phone Number Keyboard using HTML and jQuery.

Example 1:

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Phone Number Keyboard using HTML and  jQuery </title>
 <link rel = "stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous"> </script>
 </head>
<style>
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
.input-numeric-container {
    background: #fff;
    padding: 1em;
    margin: 1em auto;
    max-width: 350px;
}
.input-numeric {
    width: 100%;
    padding: 0.8em 0.2em;
    margin-bottom: 0.8em;
    box-sizing: border-box;
    border: 1px solid silver;
    outline-color: #4CAF50;
}
.table-numeric {
    width: 100%;
    border-collapse: collapse;
}
.table-numeric td {
    vertical-align: top;
    text-align: center;
    width: 33.33333333333%;
    border: 0;
}
.table-numeric button {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.3em;
    font-size: 1em;
    border-radius: 0.1em;
    outline: none;
    user-select: none;
}

.table-numeric button:active {
    top: 2px;
}
button:nth-of-type(1) {
  color: black;
  background-color: #10FFB4;
  transition: 0.2s ease-in-out;
  border-left: 3px transparent solid;
  border-right: 3px transparent solid;
}
button:nth-of-type(1):hover {
  color: #10FFB4;
  background-color: black;
  border-left: #10FFB4 3px solid;
  border-right: #10FFB4 3px solid;
}
.key {
    background: #fff;
    border: 1px solid #d8d6d6;
}
.key-del {
    background: #FF9800;
    border: 1px solid #ca7800;
    color: #fff;
}
.key-del {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.key-del::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #3f51b5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.key-clear {
    background: #E91E63;
    border: 1px solid #c70a4b;
    color: #fff;
}
button[disabled] {
    opacity: 0.5;
    cursor: no-drop;
}
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h1 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: bold; 
}
h1:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
[data-numeric="hidden"] .table-numeric {
    display: none;
}
</style>
<body>
<h1> Example </h1>
<h2> Phone Number Keyboard using HTML and jQuery </h2>
  <div class = "input-numeric-container">
    <input class = "input-numeric" type = "nember" readonly/>
    <table class = "table-numeric">
        <tbody>
            <tr>
                <td> <button type = "button" class = "key" data-key = "1"> 1 </button> </td>
                <td> <button type = "button" class = "key" data-key = "2"> 2 </button> </td>
                <td> <button type = "button" class = "key" data-key = "3"> 3 </button></td>
            </tr>
            <tr>
                 <td> <button type = "button" class = "key" data-key = "4"> 4 </button> </td>
                <td> <button type = "button" class = "key" data-key = "5"> 5 </button> </td>
                <td> <button type = "button" class = "key" data-key =  ?6"> 6 </button> </td>
            </tr>
            <tr>
                <td> <button type = "button" class = "key" data-key = "7"> 7 </button> </td>
                 <td> <button type = "button" class = "key" data-key = "8"> 8 </button> </td>
                 <td> <button type = "button" class = "key" data-key = 9"> 9 </button> </td>
            </tr>
            <tr>
                <td> <button type = "button" class = "key-del" disabled> Del </button> </td>
                <td> <button type = "button" class = "key" data-key="0"> 0 </button> </td>
                <td> <button type = "button" class = "key-clear" disabled> Clear </button> </td>
            </tr>
        </tbody>
    </table>
</div>
  <script>
 $( document ).ready(function() {
	$( document ).on( "change", ".input-numeric", function() {
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var nonKeys = parents.find( ".key-del, .key-clear");
        var inputValue = input.val();               
        if( inputValue == "" ) {
        	nonKeys.prop( "disabled", true );
        } else {
        	nonKeys.prop( "disabled", false );
        }     
    });  
	$( document ).on( "click focus", ".input-numeric", function() {    
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var data = parents.attr( "data-numeric" ) {
        if( data ) {
            if( data == "hidden" ) {
               parents.find( ".table-numeric" ).show();
            }
        }
        
    });
  
       $( document ).on( "click", ".key", function() {  
        var parents = $( this ).parents( ".input-numeric-container" );
        var number = $( this ).attr( "data-key" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();    
        input.val( inputValue + number ).change();      
    });
        $( document ).on( "click", ".key-del", function() {   
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();       
        input.val( inputValue.slice(0, -1) ).change();     
    });
        $( document ).on( "click", ".key-clear", function() {
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");     
        input.val( "" ).change();        
    });
});
  </script>
</body>
</html>

Explanation:

In the above example, we have created an example of Phone Number Keyboard using HTML and jQuery. In this we have a collection of numeric buttons with Del and clear button.

Output:

Following is the output of this example.

Phone Number Keyboard using HTML and jQuery

Example 2:

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Phone Number Keyboard using HTML and  jQuery </title>
 <link rel = "stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous"> </script>
 </head>
<style>
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}

.input-numeric-container {
    background: #fff;
    padding: 1em;
    margin: 0.8em auto;
    max-width: 450px;
}

.input-numeric {
    width: 100%;
    padding: 0.8em 0.2em;
    margin-bottom: 0.8em;
    box-sizing: border-box;
    border: 1px solid silver;
    outline-color: #4CAF50;
}

.table-numeric {
    width: 100%;
    border-collapse: collapse;
}

.table-numeric td {
    vertical-align: top;
    text-align: center;
    width: 33.33333333333%;
    border: 0;
}

.table-numeric button {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.3em;
    font-size: 1em;
    border-radius: 0.1em;
    outline: none;
    user-select: none;
}

.table-numeric button:active {
    top: 2px;
}
button:nth-of-type(1) {
  color: black;
  background-color: #10FFB4;
  transition: 0.2s ease-in-out;
  border-left: 3px transparent solid;
  border-right: 3px transparent solid;
}

button:nth-of-type(1):hover {
  color: #10FFB4;
  background-color: black;
  border-left: #10FFB4 3px solid;
  border-right: #10FFB4 3px solid;
}

body {
	font-family: sans-serif;
	color: #333;
	text-align: center;	
}

.container {
	width: 24vw;
	margin: 1px auto;
	border: 1px solid #333;
	border-radius: 10px;
	background: #eee;
}

a {
	display: inline-block;
	border:1px solid #333;
	border-radius: 5px;
	text-align: center;
	width: 6vw;
	height: 5vw;
	line-height: 5vw;
	margin: 2%;
	font-size: 2vw;
	text-decoration: none;
	color: inherit;
	background: rgba(255,255,255,0.7);
	transition: all 0.3s ease-in-out;
	&:active, &:hover {
		box-shadow: inset 0 0 2px rgba(0,0,0,1);
	}
}
.call {
	background: green;
	color: #fff;
	width: 20vw;
	margin: 4%;	
}

input {
	background: transparent;
	width: 90%;
	border: 0;
	outline: none;
	font-size: 25px;
	margin: 5px 0;
	text-align: center;
}

h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h1 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px;  
font-weight: bold; 
}
h1:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
</style>
<body>
<h1> Example </h1>
<h2> Phone Number Keyboard using HTML and jQuery </h2>
<div class = "container">
  <input/>
  <div class = "row"> <a href = "#">1</a> <a href = "#"> 2</a> <a href = "#">3 </a> </div>
  <div class = "row"> <a href = "#"> 4 </a> <a href = "#"> 5 </a <a href = "#"> 6 </a> </div>
  <div class = "row"> <a href = "#"> 7 </a> <a href = "#"> 8 </a> <a href = "#">9 </a> </div>
  <div class = "row"> <a href = "#"> * </a> <a href = "#"> 0 </a> <a href = "#"> # </a> </div>
  <div class = "row"> <a class = "call" href = "#"> <i class = "fa fa-phone"> </i> </a> </div>
</div>
  <script>
$('.row a').on('click', function() {
	var $store = $('input'),
			$number = $('.call'),			
			dialed = $(this).text();
	
	$store.val($store.val() + dialed);
	$number.attr('href', 'tel:' + $store.val());
	$store.focus();
});
  </script>
</body>
</html>

Explanation:

In the above example, we have created an example of a Phone Number Keyboard using HTML and jQuery. In this, we have a collection of numeric buttons with an option of a calling button.

Output:

Following is the output of this example.