it-swarm.com.de

in iOS8 werden bei Verwendung von .focus () die virtuelle Tastatur und die Bildlaufseite nach Berührung angezeigt

Vor iOS8 scheint die Verwendung der Javascript .focus()-Methode für ein Eingabeelement keine Auswirkung zu haben (die virtuelle Tastatur wird nicht angezeigt). Nach der neuesten Version von iOS 8 schien die Ausführung der .focus()-Methode keine Auswirkung auf das Laden der Seite zu haben. Sobald ein Benutzer jedoch irgendwo auf dem Bildschirm aufrief, würde die virtuelle Tastatur sofort angezeigt und die Seite zum fokussierten Element verschoben. (Dies ist auch ein Problem, wenn ich das HTML-Attribut "Autofokus" verwende.)

Diese Änderung hat Probleme mit iOS8-Benutzern auf meiner Website verursacht. Wenn ein Benutzer versucht, auf eine Schaltfläche auf meiner Seite zu klicken, werden durch das plötzliche Scrollen und die Tastatur ungewollt auf eine Schaltfläche geklickt, die sich auf dem Bildschirm befindet.

Ich gehe davon aus, dass dies ein Fehler in iOS8 ist und keine absichtliche Funktion war. Meine Frage ist: Was ist die effizienteste Lösung, um dieses Problem zu beheben? 

Muss ich navigator.userAgent überprüfen, um festzustellen, ob das Gerät iOS8 ist, wenn ich die .focus()-Methode verwende?

48
Mac Mad Ill

Es sieht so aus, als ob Sie definitiv einen iOS 8-Fehler treffen. In iOS7 würde Safari (anscheinend) nicht fokussierte Elemente ignorieren oder beibehalten, deren Fokus vor dem Laden der Seite festgelegt wurde. Dies beinhaltet sowohl <input autofocus> als auch input.focus(), die bis zu einem gewissen Zeitpunkt auftreten, möglicherweise das Laden von Seiten (ich habe es gerade mit einem Inline-Skript getestet).

In iOS 8 erinnert sich Safari anscheinend jetzt daran, dass das Element zwar fokussiert war, es aber erst bei einem Touch-Down-Ereignis tatsächlich fokussierte. Es sendet dann blind ein Klickereignis an das Element, das das Touch-Up erhalten hat.

Beide Browser verhalten sich für input.focus(), die nach dem Laden der Seite auftreten, gleich. Beide zoomen auf das Element und rufen die Tastatur auf.

Tests:

Die gute Nachricht ist, dass Sie sich nur über neue Verhaltensweisen bei Elementen, die Sie vorfokussieren möchten, sorgen müssen. Die andere gute Nachricht ist, dass Sie zwar einen User-Agent-Workaround verwenden müssen, Sie können ihn jedoch für alle iOS-Versionen verwenden, da sich diese bereits so verhalten, als würden Sie nicht automatisch fokussieren:

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}

Dies scheint der Ansatz http://www.google.com zu sein, der auf einigen grundlegenden Benutzer-Agent-Tests basiert:

  • Mac Book Pro: Autofokus vor dem Laden der Seite.
  • iPhone: kein Autofokus
  • iPad: kein Autofokus
  • Kit Kat (Android): focus nach dem Laden der -Seite, möglicherweise zusätzliche Erkennung des Vorhandenseins der Softwaretastatur.

Falls nicht, sollten Sie ein Radar mit Apple unter https://bugreport.Apple.com einreichen.

30
Brian Nickel

Wenn Sie ein Cordova-Projekt entwickeln, können Sie es korrigieren, indem Sie diese Zeile hinzufügen

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

in Ihre config.xml-Datei. Getestet in IOS 8.3 und IOS 8.4

21
Del

Es scheint, dass in iOS 8 eine API-Änderung der Standardbehandlung für den Befehl javascript () () vorgenommen wurde. Wenn es sich bei Ihrer Anwendung um eine Hybrid-App handelt, in der Sie die Webansicht-Fassade von Apple direkt steuern können, finden Sie die folgenden Informationen direkt aus den Dokumenten von Apple. 

Ein boolescher Wert, der angibt, ob Webinhalte programmgesteuert sind Anzeige der Tastatur.

[myWebView setKeyboardDisplayRequiresUserAction: YES];

Wenn diese Eigenschaft auf YES gesetzt ist, muss der Benutzer explizit auf .__ tippen. Elemente in der Webansicht, um die Tastatur (oder andere relevante Eingabeansicht) für dieses Element anzuzeigen. Bei der Einstellung NO wird ein Fokusereignis auf eine Element bewirkt, dass die Eingabeansicht angezeigt und diesem zugeordnet wird Element automatisch.

Der Standardwert für diese Eigenschaft ist YES.

Aus dem letzten Absatz scheint es, dass dieser Methodenaufruf nicht unbedingt für die Tastatur gilt. Es zeigt an, dass es sich um Eingabe-Ansichten auf der ganzen Welt handelt, d. H. Dropdown- und Datumsauswahl usw.

Es scheint jedoch, dass es einen Fehler gibt, da dieser Methodenaufruf derzeit für mich nicht funktioniert. Das aktuelle Verhalten, das ich empfange, entspricht dem Standardwert NEIN. 

4
xMythicx

Ich habe eine Lösung:

  1. Deaktivieren Sie alle Eingänge
  2. Aktivieren Sie die Eingabe, die Sie fokussieren möchten
  3. Stellen Sie den Fokus auf diesen Eingang
  4. Aktivieren Sie alle anderen Eingänge erneut

Hier ist ein bedingter Monkeypatch für jQuery.focus, sodass Sie den userAgent-Test nicht überall hinzufügen müssen.

JavaScript

if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
  (function($) {
    return $.fn.focus = function() {
      return arguments[0];
    };
  })(jQuery);
}

CoffeeScript

if /iPad|iPhone|iPod/g.test navigator.userAgent
  (($) ->
    $.fn.focus = ->
      arguments[0]
  )(jQuery)

Hinweis: Ich gebe arguments[0] zurück, damit die Methodenverkettung wie $(el).focus().doSomethingElse() nicht unterbrochen wird.

1
Adam Fraser

Für alle, die 2018 zu diesem Thema kommen, gibt es ein Plugin, das das Problem behebt. Installieren Sie einfach dieses https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix und input.focus() funktioniert automatisch ohne zusätzlichen Arbeitsaufwand.

0
Ahmad Alfy

Ich habe einen Fehler in den Apple Bug Reporter protokolliert und sie wurden als Duplikat geschlossen. Leider haben sie mir keine weiteren Informationen über das Duplikat oder über das Problem selbst gegeben. Ich kann nur den doppelten Elementstatus sehen, der offen ist.

0
Lipata