Removing Click Event Delay for iPad

JavaScript
1

Hello,

I’m very new to JQuery and had a big problem arise. I developed a virtual number pad for an online sign-in prompt to be used on an iPad; however, I noticed a significant delay in the iPads click event, creating terrible lag between when you press a number key and when the event (the number being inserted in the text field) actually happens.

Within a browser, all works correctly (no delay). In an iPad, there’s a problem.

From my research I have found:

http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

http://stackoverflow.com/questions/4755505/how-to-recogized-touch-event-using-jquery-for-ipad-safari-browser-is-it-possibl

Seems like I’ll need to do some raw Javascript?

The problem is, as mentioned before, I’m extremely new to Javascript/Jquery in general and I don’t know how to implement the solutions provided in the links above.

Can anyone walk me through this?

Right now my file structure is (as is relevant to this case):

index.html - containing:

<input type="text" name="anumber" placeholder="number" id="a_number"/>
          <!-- Virtual Numpad -->
          <table id="numpad">
             <tr>
                <td><div id="one" class="num_button blue">1</div></td>
                <td><div id="two" class="num_button blue ">2</div></td>
                <td><div id="three" class="num_button blue">3</div></td>
             </tr>
             <tr>
                <td><div id="four" class="num_button magenta">4</div></td>
                <td><div id="five" class="num_button magenta">5</div></td>
                <td><div id="six" class="num_button magenta">6</div></td>
             </tr>
             <tr>
                <td><div id="seven" class="num_button orange">7</div></td>
                <td><div id="eight" class="num_button orange">8</div></td>
                <td><div id="nine" class="num_button orange">9</div></td>
             </tr>
             <tr>
                <td><div id="guest_button" class="num_button yellow">Guest</div></td>
                <td><div id="zero" class="num_button red">0</div></td>
                <td><div id="anum_button" class="num_button green">Submit</div></td>
             </tr>
          </table>

script.js - containing:
Right now, I just have some simple Jquery, that appends a ‘1’ (or whatever number is pressed) to the current string in the main text field.

$('#one').click(function() {  
  var test = $("#a_number").val()+1; 
  $("#a_number").val(test);
});

Thank you so much in advance for your time!!

You can view my page here: http://elite.tamucc.edu/sundae/

2

That’s something I haven’t dealt with before, but over at jQTouch they indicate that with the onclick event you can’t get around the delay, for the pad is waiting to see if a double tap occurs.

A viable solution is to check if the page is being used by a mobile device, and if so to use the ontouchend event where appropriate instead of onclick, and then preventdefault from within the ontouchend events to prevent the event from being captured any kind of onclick event.