<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/>&nbsp; <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" />&nbsp;
      </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';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.