homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Custom iPhone Keyboard?
Trying to make a custom number-only keyboard for iphone webapps

10+ Year Member

Msg#: 3823353 posted 12:48 pm on Jan 10, 2009 (gmt 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?


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved