it-swarm.com.de

Mobiles Safari-Autofokus-Textfeld

In Mobile Safari kann ich mich nach dem Einstellen einer Verzögerungszeit nicht auf ein Textfeld konzentrieren. Ich füge einen Beispielcode hinzu, der das Problem zeigt. Wenn Sie beim Klicken auf die Schaltfläche .focus () auslösen, funktioniert alles wie erwartet. Wenn Sie den Fokus bei einem Rückruf wie bei der Funktion setTimeout aufhängen, schlägt dies NUR in der mobilen Safari fehl. In allen anderen Browsern gibt es eine Verzögerung, dann tritt der Fokus auf.

Verwirrenderweise wird das "focusin" -Ereignis auch bei mobiler Safari ausgelöst. Dies (und ähnliche Kommentare in SO) lassen mich denken, dass es sich um einen mobilen Safari-Fehler handelt. Jede Anleitung wird akzeptiert.

Ich habe im Emulator und auf iPhone 3GS/4 iOS4 getestet.

Beispiel HTML:

<!DOCTYPE html> 
  <html lang='en'> 
    <head> 
      <title>Autofocus tests</title> 
      <meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
      <meta content='yes' name='Apple-mobile-web-app-capable'> 
    </head> 
    <body>
      <h1> 
        Show keyboard without user focus and select text:
      </h1> 
      <p> 
        <button id='focus-test-button'> 
          Should focus on input when you click me after .5 second
        </button> 
        <input id='focus-test-input' type='number' value='20'> 
      </p> 
      <script type="text/javascript"> 
        //<![CDATA[
        var button = document.getElementById('focus-test-button');
        var input  = document.getElementById('focus-test-input');

        input.addEventListener('focusin', function(event) {
          console.log('focus');
          console.log(event);
        });

        button.addEventListener('click', function() {
          // *** If triggered immediately - functionality occurs as expected
          // input.focus();
          // *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor
          var t = setTimeout("input.focus();",500);
        });
        //]]>
      </script>
    </body>
  </html>

~ Ähnliche ~ SO Fragen:

51
boymc

Ich denke, das ist eher ein Feature von Mobile Safari als ein Bug. In unserer Arbeit an FastClick haben meine Kollegen und ich festgestellt, dass iOS nur innerhalb einer Funktion den Fokus auf andere Elemente auslösen kann, wenn die erste Funktion im Aufrufstack durch ein nicht programmatisches Ereignis ausgelöst wurde. In Ihrem Fall startet der Aufruf von setTimeout einen neuen Aufrufstapel, und der Sicherheitsmechanismus setzt ein, um zu verhindern, dass Sie den Fokus auf die Eingabe setzen.

Denken Sie daran, dass bei der iOS-Einstellung der Fokus auf einem Eingabeelement die Tastatur öffnet - alle diese Webseiten, die beim Laden der Seite den Fokus auf ein Eingabeelement setzen, wie Google dies tun würde, wäre die Verwendung unter iOS äußerst ärgerlich. Ich denke, Apple entschied, dass sie etwas unternehmen mussten, um dies zu verhindern. Also stimme ich @DA nicht zu: Dies ist eine Funktion und kein Fehler.

Es gibt keine bekannte Problemumgehung, daher müssen Sie die Idee einer Verzögerung aufgeben.

Update August 2012:

Ab iOS 5 dürfen Handler, die durch synthetisierte Klickereignisse ausgelöst werden, den Fokus auf Eingabeelemente auslösen. Probieren Sie das aktualisierte FastClick-Eingabefokusbeispiel aus.

Ich konnte die Tastatur durch Auslösen eines Klickereignisses nur dann auslösen, wenn das ursprüngliche Ereignis auf Benutzerinteraktion und nicht auf setTimeout zurückzuführen war. Ich glaube, das Ergebnis ist, dass Sie die Tastatur von einem Touchend-Ereignis anheben können, aber nicht von einem Timeout.

5
Nick Saretzky

Es scheint, dass focus () nur funktioniert, wenn Sie die Site zum Startbildschirm hinzugefügt haben und die Site mit diesem Link geöffnet hat.

1
elweilando

Ich war in der Lage, .focus () zu arbeiten, indem ich es an zwei separate Ereignisse in der Ereigniskarte anhängt, aber es ist irgendwie hackig.

Nach dem Hinzufügen von FastClick.js geschieht dies in iOS: .focus () funktioniert nur, wenn es von einer Funktion aktiviert wird, die an ein Ereignis angehängt ist. ABER focus ist auch ein Ereignis in der Ereigniskarte von Mobile Safari, das tatsächlich aufgerufen wird, wenn Sie .focus () von jQuery verwenden. SO Sie können redundant sein und ein weiteres .focus () an das Fokusereignis des Objekts anhängen, um sicherzustellen, dass es durchgezogen wird. Dies funktioniert besonders gut, wenn Sie eine Eingabe im DOM erstellen. Ich programmiere in letzter Zeit gerne für MeteorJS, so sieht die Lösung dort aus:

Template.templateName.events({
    "click button":function(){
        Session.set("makeButtonVisible",true);
        $("input.created").focus();
    },
    "focus input.created":function(){
        $("input.created").focus();
    }
});

Ich hoffe, das ist nützlich für jemanden da draußen, ich brauchte zwei Stunden, um diesen herauszufinden.

EDIT: Nun, insbesondere für MeteorJS können Sie die Funktion Template.templateName.rendered nicht verwenden, da die .focus () von einem Ereignis aus aufgerufen werden muss. ABER aus irgendeinem Grund, wenn Sie eine Eingabe über jQuery hinzufügen, können Sie sich innerhalb des Ereignisses darauf konzentrieren. Ich denke, das ist der Weg. Das habe ich am Ende getan:

Template.templateName.events({
    "click button":function(){
        $("body").append("<input class='created' type='tel'>");
        $("input.created").focus();
    }
});
0
Marz

Matt Antwort hinzufügen. Zumindest bei Safari unter iOS 5.1 ist dieses Problem behoben. Ihre FastClick-Funktion, dh das Synthetisieren eines Klickereignisses wird den Fokus nicht verfehlen. Dies hilft jedoch nicht Menschen, die möchten, dass ihr einziger focus()-Code auf allen iOS-Versionen funktioniert, seufz.

0
dodysw