<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>
#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: italic;
}
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);
});
pattern = new RegExp("^(\\+\\d{1,2})?(\\d+\\-*\\d+)*$");
function validate(txt) {
if (!pattern.test(txt) || txt.length < 8) {
phoneNo.style.border = '2px solid red';
return false;
} else
phoneNo.style.border = 'initial';
return true;
}
/* 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';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.