Jw3school

<h2>Keypad tel: dialer<br><span style="color:green;">Whatsapp</span></h2>
<html lang="en"><head>
  
  
  
  <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">

}
.container {
  width: 24vw;
  margin: 50px 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;
}
a:active,
a:hover {
  box-shadow: inset 0 0 2px #000000;
}
.callme1,.callme2,.callme3 {
  background: green;
  color: #fff;
  width: 20vw;
  margin: 6%;
font-size:30px;
padding-top:11px;
}
input {
  background: transparent;
  width: 90%;
  border: 0;
  outline: none;
  font-size: 25px;
  margin: 25px 0;
  text-align: center;
}

</style>

</head>

$store.val($store.val() + dialed);
 $number.attr('href', 'https://api.whatsapp.com/send?phone=' + $store.val() );
  $store.focus();});

</script>

<p>this not working in iframe , try below:
<a href="https://jerriew3schools.blogspot.my/search/label/Keypad tel: dialer" style="width:100%;" target="_top"><button style="background:yellow">try full screen demo</button></a>
</p>
 
 </body></html>

Tutorial

1. HTML Button Content

2. Javascripi Content

3. Not working in iframe

this not working in iframe , try below:

Labels: Keypad tel: dialer

Jw3school: Keypad tel: dialer

	Result:

<h2>Keypad tel: dialer<br><span style="color:green;">Whatsapp</span></h2> <html lang="en"><head> <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css"> <style> body { font-family: sans-serif; color: #333; text-align: center; } .container { width: 24vw; margin: 50px 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; } a:active, a:hover { box-shadow: inset 0 0 2px #000000; } .callme1,.callme2,.callme3 { background: green; color: #fff; width: 20vw; margin: 6%; font-size:30px; padding-top:11px; } input { background: transparent; width: 90%; border: 0; outline: none; font-size: 25px; margin: 25px 0; text-align: center; } </style> <script> window.console = window.console \|\| function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", ""); } </script> </head> <body translate="no"> <div class="container"> <input id="numcall"> <div class="row"><a>1</a><a>2</a><a>3</a></div> <div class="row"><a>4</a><a>5</a><a>6</a></div> <div class="row"><a>7</a><a>8</a><a>9</a></div> <div class="row"><a></a><a>0</a><a>#</a></div> <div class="row"><a class="callme1" href=""><i class="fa fa-whatsapp" ></i></a></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script> $('.row a').on('click', function() { var $store = $('#numcall'), $number = $('.callme1'), dialed = $(this).text(); $store.val($store.val() + dialed); $number.attr('href', 'https://api.whatsapp.com/send?phone=' + $store.val() ); $store.focus();}); </script> <p>this not working in iframe , try below: <a href="https://jerriew3schools.blogspot.my/search/label/Keypad tel: dialer" style="width:100%;" target="_top"><button style="background:yellow">try full screen demo</button></a> </p> </body></html> Tutorial 1. HTML Button Content <div class="container"> <input id="numcall"> <div class="row"><a>1</a><a>2</a><a>3</a></div> <div class="row"><a>4</a><a>5</a><a>6</a></div> <div class="row"><a>7</a><a>8</a><a>9</a></div> <div class="row"><a>*</a><a>0</a><a>#</a></div> <div class="row"><a class="callme1" href=""><i class="fa fa-whatsapp" ></i></a></div> </div> 2. Javascripi Content <script> $('.row a').on('click', function() { var $store = $('#numcall'), $number = $('.callme1'), dialed = $(this).text(); $store.val($store.val() + dialed); $number.attr('href', 'https://api.whatsapp.com/send?phone=' + $store.val() ); $store.focus();}); </script> 3. Not working in iframe this not working in iframe , try below: Labels: Keypad tel: dialer