Hello readers, Toady in my blog i have tried to create a simple phone number picker using CSS and JavaScript.
While filling many online forms besides names and emails, contact information filed is also essential part to be filled by the users.
As while filling the contact information the user needs to type the number using the keyboard but this method results in inaccurate data input.
To reduce the user input error, I have tried to create a way that allows the users to quickly enter their phone numbers and it seems to be same as data pickers.
I have used HTML5, CSS, and JavaScript to create this. Below is the code for it :-
HTML code :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Phone Number Picker</title>
<!-- Fonts css file -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<div class="container">
<div id="wrapper">
<h2>Enter the Phone No.</h2>
<h4>8 - 15 characters. Click dial icon to toggle dial appearance.</h4>
<div id="dialWrapper">
<label for="phoneNo">Phone No.</label>
<input type="tel" id="phoneNo" maxlength=15/> <img title="Click to show or hide the dial" src="https://cdn4.iconfinder.com/data/icons/miu/24/editor-grid-view-block-glyph-24.png" alt="icon" id="dialIcon" />
</div>
</div>
</div>
</body>
</html>
Firstly, to create an input filed with a dial icon that opens whenever any user clicks over the icon a dial screen gets open.
In this I have used tel input type for displaying the phone number.
Now for creating the dialing screen, it is basically a grid of numbers that start from 0 to 9 along with some special characters.
Below is the code in JavaScript showing the creation of dial screen :-
/* create dial screen */
dial = document.createElement('table');
dial.id = 'dial';
Now for creating the table with rows and columns including the cell ,below is the code :-
for (var rowNum = 0; rowNum < 4; rowNum++) {
var row = dial.insertRow(rowNum);
for (var colNum = 0; colNum < 3; colNum++) {
/* if last row */
if (rowNum === 3) {
cell = row.insertCell(colNum);
cell.textContent = '-';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '0';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '+';
cell.className = 'dialDigit';
break;
}
cell = row.insertCell(colNum);
cell.className = 'dialDigit';
cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
}
}
Now for styling the dial screen we need to add some CSS properties, below is the code for it:-
#wrapper{
background: transparent url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/seigaiha.png") repeat scroll 0% 0%;
font-weight: bold;
width: 600px;
height: 400px;
font-family: "Palatino";
margin: auto;
box-shadow: 0 0 6px #999, inset 0 0 7px #fff;
border-radius: 4px;
color: #000;
}
#dialWrapper{
width: 600px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom:10px;
position: relative;
}
input[type="tel"]{
height: 18px;
width: 150px;
font-family: inherit;
font-size: 11pt;
box-shadow: 0 0 6px #999;
}
label{
font-size: 13pt;
position: relative;
top: -30px;
left: 80px;
}
#dial{
width: 200px;
height: 200px;
border-collapse: collapse;
text-align: center;
visibility: hidden;
position: relative;
top: 88px;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: #000;
box-shadow: 0 0 6px #999;
}
.dialDigit{
border: 1px solid #fff;
cursor: pointer;
background-color: rgba(255,228,142,.7);
}
.dialDigit:hover{
background-color: rgb(255,228,142);
}
.dialDigit:active{
background-color: #FF6478;
}
#dialIcon{
cursor: pointer;
}
h2,h4{
text-align: center;
padding-top: 30px;
margin-bottom: 0;
}
h4{
padding: 0;
font-style: itali
}
Now here is the JavaScript code :-
$(function(){
var phoneNo = document.querySelector('#phoneNo'),
dial = document.createElement('table');
dial.id = 'dial';
/* create dial screen */
for (var rowNum = 0; rowNum < 4; rowNum++) {
var row = dial.insertRow(rowNum);
for (var colNum = 0; colNum < 3; colNum++) {
/* if last row */
if (rowNum === 3) {
cell = row.insertCell(colNum);
cell.textContent = '-';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '0';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '+';
cell.className = 'dialDigit';
break;
}
cell = row.insertCell(colNum);
cell.className = 'dialDigit';
cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
}
}
/* Add dial screen to the page */
document.querySelector('#dialWrapper').appendChild(dial);
/* Add click event to dial digits, to input no. from dial screen */
dialDigits = document.querySelectorAll('.dialDigit');
for (var i = 0; i < dialDigits.length; i++) {
dialDigits[i].addEventListener('click', dialNumber);
}
function dialNumber() {
var val = phoneNo.value + this.textContent;
if (val.length > 15) return false;
validate(val);
phoneNo.value = val;
}
phoneNo.addEventListener('keyup', function() {
validate(this.value);
});
/* Add click event to dial icon, to open-close the dial screen */
document.querySelector('#dialIcon').addEventListener('click', toggleDial);
function toggleDial() {
dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === '' ? 'visible' : 'hidden';
}
});
Conclusion:-
Hence, I have tried to create a simple phone number picker using CSS and JavaScript.
0 Comment(s)