So, I read and could not because the life of me decided to solve my problem effectively.
In short, I have a web application built for iPad that works as it should. However, I have an Ajax form that also serves as it should. But after a callback and I cleared / reset my form, "iPad" automatically focuses on the input and opens the keyboard again. This is far from ideal.
I managed to crack it, but it is still not perfect. The following code runs in my ajax callback, which works - except that the keyboard flash quickly opens and closes.
Notice my code will not work if I do not use setTimeout . Also, from my understanding, document.activeElement.blur(); only works when there is a click event, so I ran one through js.
IN OTHER WORDS, HOW DO I PREVENT KEYBOARD FROM RETURN AFTER AJAX CALL ON WEB APP?
PS: Ajax call works fine and does not open the keyboard in Safari on iPad, just a web application mode.
Here is 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); } }
Perhaps this is due to the way I clean my forms, so here is the code. Note that all inputs have 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(); }