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();
    }