iPad web app: Prevent input focus AFTER ajax call
- by Mike Barwick
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();
}
