iPad网络应用程序:在ajax调用后阻止输入焦点

Question

所以我已经四处阅读,不能为我的生活找到有效解决我的问题.

简而言之,我有一个为iPad构建的网络应用程序 - 它可以正常工作.但是,我有一个Ajax表单,它也应该提交它.但是,在callback我清除/重置表单之后,"iPad"会自动关注输入并再次打开键盘.这远非理想.

我设法破解了它,但它仍然不完美.下面的代码在我的ajax回调上运行,它可以正常工作 - 除了键盘的快速打开和关闭之外.

请注意,除非我使用,否则我的代码将无效setTimeout.另外,根据我的理解,document.activeElement.blur();只有在有点击事件时才有效,所以我通过js触发了一个.

换句话说,我如何防止键盘在AJAX上调用WEB应用程序后重新启动？

PS:Ajax调用工作正常,不能在iPad上的Safari中打开键盘,只是Web应用程序模式.

这是我的代码:

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

也许这与我如何清理表单有关,所以这就是代码.注意,所有输入都有tabindex =" - 1".

    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

对于遇到此问题的其他人，我absolute在表单上放置了一个“覆盖”div（用作 ajax 成功时显示的感谢消息）。显然这导致键盘在 Ajax 调用后打开。出于用户界面的原因，我将位置更改为position: fixed;，并且我最初的问题中突出显示的问题似乎神秘地自行修复。奇怪……很想知道为什么。