safari iphone ios 7 Freezes on input text focus

Question

We have a complex application form with a lots of fields and jquery events. The problem is similar to this iOS 7 Safari: OS locks up for 4 seconds when clicking/focusing on a HTML input but in our case, it totally freezes and will never get back to work.

The problem occurs only in safari in iphone, ANyone have same problem and solution? thanks

Answer 1

Using Binke's solution fixed the delay on the touch events, but then the delay was still present when pressing keys, so capturing the keypress and keydown events worked around this issue for me. I had to use the keypress event to distinguish between capital and lowercase letters, but the keydown event was required for delete/backspace. This basically just captures the key pressed and puts it in the input box (or removes last char for backspace/delete). The selectors variable should contain the jquery selector(s) that will include all inputs causing the freezing. Here is the code we used:

    var scroll = 0;    
    var selectors = "#input1, #input2, #input3";
    $(selectors).bind("touchstart", function (e) {
        scroll = document.body.scrollTop;
    });
    //I stripped away some of Binke's code because we were only having an issue with INPUT controls
    $(selectors).bind("touchend", function (e) {
        if (scroll == document.body.scrollTop) { 
            if (e.target.nodeName.toString().toUpperCase() == 'INPUT') {
                e.preventDefault(); 
                e.target.focus();  
                e.target.setSelectionRange(e.target.value.length, e.target.value.length);
            } 
        }
    });
    $(selectors).bind('keydown', function (e) {
        //alert(e.which);
        if (e.which == 8 || e.which == 46) { // BACKSPACE OR DELETE
            $(this).val($(this).val().substring(0, ($(this).val().length - 1)));
            return false;
        }
        else { return true; }
    });
    $(selectors).bind("keypress", function (e) {
        if (e.which != 8 && e.which != 46) {
            $(this).val($(this).val() + String.fromCharCode(e.which));
        }
        return false;
    });