How to create an onscreen dialpad for web pages ? And append the entries from dialpad to a text field. Here is one working example left for you,

This is a custom dialpad used in web twilio , the web client for twilioid app.

CSS

<style>

.btn-primary.active{color:rgba(255, 255, 255, 0.75);}

.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);

background-color:#006dcc;

background-image:-moz-linear-gradient(top, #0088cc, #0044cc);

background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));

background-image:-webkit-linear-gradient(top, #0088cc, #0044cc);

background-image:-o-linear-gradient(top, #0088cc, #0044cc);

background-image:linear-gradient(to bottom, #0088cc, #0044cc);

background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);

border-color:#0044cc #0044cc #002a80;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

*background-color:#0044cc;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,

.btn-primary[disabled]{color:#ffffff;background-color:#0044cc;*background-color:#003bb3;}

.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}

</style>

Html

Code to create dialpad :

<table id="dialpad" cellpadding="3%">

<tr id="dial_row1">

<td><input type="button" value="1" id="button1" class="btn btn-primary">

<td><input type="button" value="2" id="button2" class="btn btn-primary"></td>

<td><input type="button" value="3" id="button3" class="btn btn-primary"></td>

<td><input type="button" value=" Clear " id="buttonclear" class="btn btn-warning"></td>

</tr>

<tr id="dial_row2">

<td><input type="button" value="4" id="button4" class="btn btn-primary"></td>

<td><input type="button" value="5" id="button5" class="btn btn-primary"></td>

<td><input type="button" value="6" id="button6" class="btn btn-primary"></td>

<td><input type="button" value="Erase " id="buttonerase" class="btn btn-warning"></td>

</tr>

<tr id="dial_row3">

<td><input type="button" value="7" id="button7" class="btn btn-primary"></td>

<td><input type="button" value="8" id="button8" class="btn btn-primary"></td>

<td><input type="button" value="9" id="button9" class="btn btn-primary"></td>

<td><input type="button" id="accept_button" class="btn btn-success" value="Accept" disabled="disabled"></td>

</tr>

<tr id="dial_row4">

<td><input type="button" value="*" id="buttonstar" class="btn btn-primary"></td>

<td><input type="button" value="0" id="button0" class="btn btn-primary"></td>

<td><input type="button" value="#" id="buttonpound" class="btn btn-primary"></td>

<td><input type="button" id="reject_button" class="btn btn-danger" value="Reject " disabled="disabled"/></td>

</tr>

</table>

and create a text field to append values,

</pre>
<form name="myform">

<input type="text" id="number_to_call"  name="number_to_call" />

</form>
<pre>

Script

for appending to text field,

$.each(['0','1','2','3','4','5','6','7','8','9','star','pound','erase','clear'], function(index, value) {

$('#button' + value).click(function()

{

var number=value;

if(number == 'star')

{

document.myform.number_to_call.value += '*';

}

else if(number == 'pound')

{

document.myform.number_to_call.value += '#';

}

else if(number == 'clear')

{

document.myform.number_to_call.value = '';

}

else if(number == 'erase')

{

number =(document.myform.number_to_call.value).slice(0,-1);

document.myform.number_to_call.value = number;

}

 

else

{

document.myform.number_to_call.value += number;

}

});

});

for sending dtmf, change the click function as follows,

if (value=='star')

connection.sendDigits('*')

else if (value=='pound')

connection.sendDigits('#')

else

connection.sendDigits(value)