2014-06-06 7 views
6

So habe ich herum gelesen und kann nicht für das Leben von mir herauszufinden, um mein Problem effektiv zu lösen.iPad Web App: Prevent Eingabefokus Nach Ajax Anruf

Kurz gesagt, ich habe eine Web-App für das iPad gebaut - die funktioniert wie es sollte. Allerdings habe ich eine Ajax-Form, die auch so vorlegt, wie es sollte. Aber, nach dem callback und ich lösche/setze mein Formular, das "iPad" fokussiert automatisch auf einen Eingang und öffnet die Tastatur wieder. Das ist alles andere als ideal.

Ich habe es geschafft, mich herumzuhacken, aber es ist immer noch nicht perfekt. Der Code unten wird auf meinem Ajax-Callback ausgeführt, was funktioniert - außer es gibt immer noch einen Blitz, der sich schnell öffnet und schließt.

Hinweis, mein Code wird nicht funktionieren, wenn ich setTimeout verwende. Auch von meinem Verständnis funktioniert document.activeElement.blur(); nur, wenn es ein Klickereignis gibt, also löste ich ein über js aus.

IN ANDEREN WORTEN, WIE VERHINDERE ICH DIE TASTATUR, NACH AJAX CALL ON WEB APP WIEDER ZU ÖFFNEN?

PS: Ajax Anruf funktioniert gut und öffnet nicht die Tastatur in Safari auf dem iPad, nur Web-App-Modus.

Hier ist mein 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); 
     } 
    } 

Vielleicht ist es damit zusammen, wie ich meine Formulare bin Clearing, also hier ist, dass Code. Beachten Sie, dass alle Eingänge tabindex = "- 1" haben.

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

Antwort

4

JUST, als ich eine gottverdammte Bounty postete, fand ich es heraus - aus Versehen. Go figure ... lol

Für alle anderen in dieses Problem, hatte ich eine "Overlay" div positioniert absolute über das Formular (als meine Dankeschön-Nachricht auf dem Ajax Erfolg angezeigt). Anscheinend führte dies dazu, dass sich die Tastatur nach dem Ajax-Aufruf öffnete. Aus UI-Gründen habe ich die Position in position: fixed; geändert und das in meiner ursprünglichen Frage hervorgehobene Problem scheint sich auf mysteriöse Weise selbst zu beheben. Seltsam ... würde gerne wissen, warum, wenn jemand weiß ... brutal.

+0

es ist super-hilfreich für andere, danke! – Fattie