Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Custom iPhone Keyboard?

Trying to make a custom number-only keyboard for iphone webapps



12:48 pm on Jan 10, 2009 (gmt 0)

10+ Year Member

I have a webapp where you need to type your zip code on a particular page. Its quite a hassle to have to use the normal keyboard, switch it over to numbers, then use only the tiny numbers at the top while all the other space goes to waste. So i had the idea to make something kind of like the numberpad you use when dialing the phone. When you also only have 10 possible digits to type.

Its a javascript keyboard that adds digits to a DIV that is styled to look like a text field. It runs really well on a computer, but it's super slow on the phone. The code is pretty simple, so I'm amazed that with all the complicated javascript stuff the phone can do, this basic keyboard would be so slow.

Heres my code:

<script language="JavaScript" type="text/javascript">
function buttontype(dingding)
if (dingding == 'x')
if (document.getElementById("zipcode").value.length)
var shortstring = document.getElementById("zipdisplay").innerHTML;
shortstring = shortstring.substring(0,(document.getElementById("zipcode").value.length - 1));

document.getElementById("zipdisplay").innerHTML = shortstring;
document.getElementById("zipcode").value = shortstring;
if (document.getElementById("zipcode").value.length < 5)
document.getElementById("zipdisplay").innerHTML += dingding;
document.getElementById("zipcode").value += dingding;

The HTML is pretty simple too, its just an image cut up by an image map, with an onClick for each button:

<img class='imgbutton' src="images/keyboard.png" alt="1" height="103" width="307" usemap="#keyboard" border="0" hspace="1" vspace="5">
<map name="keyboard">
<area shape="rect" coords="205,52,254,101" onClick="javascript:buttontype('0');">
<area shape="rect" coords="256,52,305,101" onClick="javascript:submit();">
<area shape="rect" coords="154,52,203,101" onClick="javascript:buttontype('9');">
<area shape="rect" coords="103,52,152,101" onClick="javascript:buttontype('8');">
<area shape="rect" coords="52,52,101,101" onClick="javascript:buttontype('7');">
<area shape="rect" coords="1,52,50,101" onClick="javascript:buttontype('6');">
<area shape="rect" coords="256,1,305,50" onClick="javascript:buttontype('x');">
<area shape="rect" coords="205,1,254,50" onClick="javascript:buttontype('5');">
<area shape="rect" coords="154,1,203,50" onClick="javascript:buttontype('4');">
<area shape="rect" coords="103,1,152,50" onClick="javascript:buttontype('3');">
<area shape="rect" coords="1,1,50,50" onClick="javascript:buttontype('1');">
<area shape="rect" coords="52,1,101,50" onClick="javascript:buttontype('2');">

I'm not the best javascripter out there, my forte is more the server side stuff. Any suggestions on how I can speed this up?


Featured Threads

Hot Threads This Week

Hot Threads This Month