iPad web app: Prevent input focus AFTER ajax call

Question

So I've read around and can't for the life of me figure out of to solve my issue effectively.

In short, I have a web app built for the iPad - which works as it should. However, I have an Ajax form which also submits as it should. But, after the callback and I clear/reset my form, the "iPad" automatically focuses on an input and opens the keyboard again. This is far from ideal.

I managed to hack my way around it, but it's still not perfect. The code below is run on my ajax callback, which works - except there's still a flash of the keyboard quickly opening and closing.

Note, my code won't work unless I use setTimeout. Also, from my understanding, document.activeElement.blur(); only works when there's a click event, so I triggered one via js.

IN OTHER WORDS, HOW DO I PREVENT THE KEYBOARD FROM REOPENING AFTER AJAX CALL ON WEB APP?

PS: Ajax call works fine and doesn't open the keyboard in Safari on the iPad, just web app mode.

Here's my code:

    hideKeyboard: function () {

        // iOS web app only, iPad
        IS_IPAD = navigator.userAgent.match(/iPad/i) != null;

        if (IS_IPAD) {
            $(window).one('click', function () {
                document.activeElement.blur();
            });
            setTimeout(function () {
                $(window).trigger('click');
            }, 500);
        }
    }

Maybe it's related to how I'm clearing my forms, so here's that code. Note, all inputs have tabindex="-1" as well.

    clearForm: function () {

        // text, textarea, etc
        $('#campaign-form-wrap > form')[0].reset();

        // checkboxes
        $('input[type="checkbox"]').removeAttr('checked');
        $('#campaign-form-wrap > form span.custom.checkbox').removeClass('checked');

        // radio inputs
        $('input[type="radio"]').removeAttr('checked');
        $('#campaign-form-wrap > form span.custom.radio').removeClass('checked');

        // selects
        $('form.custom .user-generated-field select').each(function () {

            var selection = $(this).find('option:first').text(),
                labelFor = $(this).attr('name'),
                label = $('[for="' + labelFor + '"]');

            label.find('.selection-choice').html(selection);
        });
        optin.hideKeyboard();
    }

Answer 1

For anyone else running into this issue, I had an "overlay" div positioned absolute over the form (used as my Thank You message displayed on the ajax success). Apparently this was causing the keyboard to open after the Ajax call. For UI reasons, I changed the position to position: fixed; and the issue highlighted in my initial question has seem to mysteriously fix itself. Weird... would love to know why.