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)

Junior Member

10+ Year Member

joined:Nov 22, 2004
posts: 113
votes: 0

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?


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members