Prevent Delay on the Focus Event in HTML5 Apps for Mobile Devices with jQuery Mobile



In this quick tip I’ll show you how to prevent delay on the focus event in HTML5 apps for mobile devices with jQuery mobile. I stumbled upon this solution after a client complained about a delay taking place when switching between input fields.

Since I am using jQuery and jQuery Mobile, I thought maybe the problem was perhaps in one of the libraries. This didn’t hold up, however.

After some thinking and reading similar issues, I figured that, just as with the click event, the mobile device (both iOS and Android) seem to wait for gestures, double-taps, or other events to take place before firing the click event.



The fix

In the end, I figured out that there was one very simple and easy fix for this: manually firing the touch event using the earliest-firing of all touch events: touchstart

$('#some-selector').on('touchstart', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(this).trigger('focus');
});

That’s all there is to it! This will trigger the focus event a bit earlier than it normally would.

Note: This does not require you to do anything else with the focus event. Even if you have no actual code for the focus event, it will still focus the element much quicker.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+22Share on StumbleUpon7Share on Reddit0Share on LinkedIn1Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!