React: Eingabetyp = Bereich onChange sollte ausgelöst werden, wenn der Wert mit den Pfeiltasten der Tastatur geändert wird

Erstellt am 17. Nov. 2013  ·  33Kommentare  ·  Quelle: facebook/react

DOM starter Bug

Hilfreichster Kommentar

Warum ist das geschlossen? Dies ist immer noch ein Problem - onChange wird in unseren Tests in IE11 überhaupt nicht ausgelöst. Erzwungene Verwendung von https://github.com/mapbox/react-range

Alle 33 Kommentare

Chrome löst das Ereignis input , wenn ein Bereich mithilfe der Pfeiltasten geändert wird, Firefox jedoch.

Chrome löst ein Änderungsereignis aus, wenn Sie es mit der Tastatur ändern. Kann 'change' anstelle von input verwendet werden?

In Chrome Beta und Firefox wird 'change' beim Ziehen bis zum Mouseup nicht ausgelöst, daher sollten wir uns auch hier die Eingaben anhören.

Ich habe eine JSFiddle erstellt, um dies zu testen: http://jsfiddle.net/vqnMU/embedded/result/

React scheint auf input warten und input & change auszulösen, wann immer es auftritt.

Fokussieren Sie den Schieberegler und drücken Sie nach rechts:

| Browser | Ereignis | Ereignis reagieren |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | - || Ändern |
Chrome Canary | Eingabe, Änderung ||
| IE 10 | Ändern | - |

* _Firefox löst change bei blur_ aus

Zusätzlich zum Ziehen:

| Browser | Ereignis | Ereignis reagieren |
| --- | --- | --- |
| Chrome 34.0.1847.131 | Eingabe * | Eingabe, Änderung |
| Safari 7.0.3 | Eingabe, Änderung | Eingabe, Änderung |
| Chrome Canary | Eingabe * | Eingabe, Änderung |
| Firefox 29 | Eingabe * | Eingabe, Änderung |
| IE 10 | Ändern | - |

* _Diese Browser lösen alle change beim Ziehen aus_ aus

Das Bearbeiten von ChangeEventPlugin, um auf Änderungsereignisse für alle Eingabetypen zu warten (35e7aa43f801f4836305ee25800988ce52003767), scheint die Behandlung von Änderungen und Eingabeereignissen von React für alle oben genannten Browser zu korrigieren. Sollte ich eine Pull-Anfrage stellen oder gibt es einen Grund, warum das Plugin nur auf change -Ereignisse für fehlende Dateieingaben gewartet hat?

Ich bin gerade auf dieses Problem gestoßen, als ich versucht habe, ein Widget zu portieren, auf das ich reagieren muss.
Kann jemand im Kern Feedback geben, ob der Vorschlag von @eddhannay funktionieren würde / nicht? Vielen Dank :)

@locks Ich würde empfehlen, Ihre eigenen zu implementieren. Es scheint, als ob alle HTML-Eingabeelemente eine Reihe von Inkonsistenzen aufweisen, die schwer zu normalisieren sind und im Grunde genommen unstyle: fähig sind.

@syranide Ich denke, wir sollten versuchen, alle eingebauten Eingaben zumindest größtenteils vernünftig zu unterstützen.

@spicyj Sicher! Aber es gibt viele seltsame Dinge, die wir nicht beheben können ... wie den Wert von type="number" nicht lesen zu können, wenn er nicht streng numerisch ist usw.

+1

Jede Problemumgehung für IE10 +, um auf das Auslösen eines Synthesizers onChange in einem Browser zu reagieren, der nach Bereichseingaben wechselt

+1 für Eingabe in IE10 + Auslösen von onChange

+1 auf alle +1

irgendwelche Neuigkeiten? Die Bereichseingabe ist in IE 11 immer noch unterbrochen.
Funktioniert jedoch hervorragend auf Edge.

+1, damit dies angewendet wird. Funktioniert bei mir nicht einmal bei Edge

Funktioniert nicht in IE 11.

+1

Für das, was es wert ist, habe ich eine Workaround-Komponente erstellt, während diese im Kern ausgearbeitet wird: https://github.com/mapbox/react-range

+1, Ich liebe die Arbeit, an der alle arbeiten, aber ich bin der Meinung, dass dieser Fehler eine höhere Priorität haben sollte, um das Problem zu beheben, da wir uns der 2-Jahres-Marke von seiner Entdeckung nähern.

@dancoates Es tut mir leid, dass dies für uns eine niedrigere Priorität hat als für Sie. Sie können jedoch gerne eine Pull-Anfrage senden! ChangeEventPlugin ist ein wenig haarig, aber mein Blog-Beitrag unter http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html sollte Ihnen eine Vorstellung von der allgemeinen Strategie geben. Bei Bereichselementen sollten wir sowohl Eingabe- als auch Änderungsereignisse und Feuerereignisse abhören, wenn eines der beiden Ereignisse eintritt (aber nur einmal, selbst wenn beide Ereignisse auftreten).

Ich muss mich nicht entschuldigen, mir ist klar, dass es schwierig ist. Ich werde mir ChangeEventPlugin ansehen und sehen, ob ich helfen kann.
Vielleicht würde ein Abschnitt mit Vorbehalten in den Dokumenten den Leuten helfen, sich zu fragen, warum Änderungen nicht ausgelöst werden. Obwohl ich denke, dass dieser Thread leicht zu finden ist.

: +1: würde gerne sehen, dass dies behoben wird!

Wie ich vorerst mit dem Problem umgegangen bin
Für meine Verwendung habe ich einfach dasselbe Ereignis zu einem onMouseUp -Ereignis hinzugefügt und es funktioniert für alle IE 10 und höher und Edge.

Es gibt nicht genau das gleiche Ergebnis, da der Wert nur beim mouseup -Ereignis geändert wird, aber ich denke (für meinen Fall jedenfalls), dass er sich wunderbar verschlechtert.

Ich bin auch darauf gestoßen und würde es gerne repariert sehen.

Vielen Dank für die Vorschläge zur Problemumgehung. Das Hinzufügen eines "onClick" - oder "onMouseup" -Ereignisses war sehr hilfreich, aber es ist immer noch nicht optimal, dass nichts passiert, bis der Benutzer den Schieberegler loslässt.

Schauen Sie sich dies auf StackOverflow an, in dem erklärt wird, wie Sie das Abrufen von Updates beim Ziehen des Benutzers beheben können ...

Warum ist das geschlossen? Dies ist immer noch ein Problem - onChange wird in unseren Tests in IE11 überhaupt nicht ausgelöst. Erzwungene Verwendung von https://github.com/mapbox/react-range

Wir verwenden 15.3.2 und haben dieses Problem. Wenn ich mir die Versionshinweise für die drei Nebenversionen seitdem ansehe, sehe ich nicht, dass dies behoben wurde. Warum ist es geschlossen? Das Problem https://github.com/facebook/react/issues/8168 scheint der Tracking-Fall dafür zu sein, aber es scheint, dass dieses Problem eine viel gründlichere Beschreibung des Problems enthält.

Wenn Sie sich den obigen Verlauf ansehen, werden Sie feststellen, dass das Problem mit # 5746 geschlossen wurde.
Wenn Sie diese PR öffnen, werden Sie sehen, dass ihr Meilenstein auf 16 gesetzt ist.

Das Update wird also in 16 sein, und wir können es nicht in 15.x setzen, da es eine bahnbrechende Verhaltensänderung einführt.

Ich weiß nicht, ob es möglich ist, es auf 15.x zurück zu portieren. @jquense und @nhunzaker könnten dies wahrscheinlich beantworten.

Es ist möglich! Es gibt sogar eine PR :) bereits # 8575

Oh schön. Können Sie eine Liste der DOM-PRs erstellen, die dort hängen und auf eine Überprüfung warten?
Fügen Sie sie dann in # 8583 zum Regenschirm hinzu, damit die relevanten Fälle manuelle Tests haben.

https://github.com/facebook/react/pull/8575 steht auf meiner Aufgabenliste. Ich muss nur ein paar Sachen vor Ort testen und dann denke ich, dass wir 👍 zusammenführen werden. Ich werde sicherstellen, dass # 8583 einige relevante Fälle hinzugefügt werden, wenn ich die Gelegenheit bekomme, sie zu überprüfen

Arbeitet jemand an einem Browser-Testgerät dafür? Wenn nicht, habe ich etwas Zeit, um einen aufzuschreiben.

Ich hatte es geplant, aber ich hatte noch einen Moment Zeit. Fühlen Sie sich frei zu springen

Keine Sorgen. Es gibt viele andere Testfälle zu schreiben. Ich habe eine PR im Zusammenhang mit https://github.com/facebook/react/issues/8308. Ich werde darauf schalten.

Ich bin heute auf meinem Windows Phone auf dieses Problem gestoßen. Die in onChange angegebene Methode wird nicht aufgerufen. Wann wird das Update angewendet?

Dies wurde in 15.6.x veröffentlicht.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen