React: input type = range onChangeは、キーボードの矢印キーを使用して値を変更するときに起動する必要があります

作成日 2013年11月17日  ·  33コメント  ·  ソース: facebook/react

DOM starter Bug

最も参考になるコメント

なぜこれが閉鎖されているのですか? これはまだ問題です-私たちのテストでは、IE11ではonChangeはまったく起動しません。 https://github.com/mapbox/react-rangeの使用を強制

全てのコメント33件

矢印キーを使用して範囲が変更された場合、Chromeはinputイベントを発生させませんが、Firefoxは発生します。

Chromeは、キーボードで変更すると「変更」イベントを発生させます。 入力の代わりに「変更」を使用することは可能ですか?

Chromeベータ版とFirefoxでは、マウスを上げるまでドラッグしても「変更」は発生しないため、ここでも入力を聞く必要があります。

これをテストするためにJSFiddleを作成しました: http ://jsfiddle.net/vqnMU/embedded/result/

Reactはinputリッスンしていて、発生するたびにinputchangeをトリガーしているようです。

スライダーに焦点を合わせて右を押す:

| ブラウザ| イベント| Reactイベント|
| --- | --- | --- |
| Chrome 34.0.1847.131 * | -|| 変更|
ChromeCanary | 入力、変更||
| IE 10 | 変更| -|

* _Firefoxはblur_でchangeをトリガーします

さらにドラッグする場合:

| ブラウザ| イベント| Reactイベント|
| --- | --- | --- |
| Chrome 34.0.1847.131 | 入力* | 入力、変更|
| Safari 7.0.3 | 入力、変更| 入力、変更|
| ChromeCanary | 入力* | 入力、変更|
| Firefox 29 | 入力* | 入力、変更|
| IE 10 | 変更| -|

* _これらのブラウザはすべて、ドラッグ終了時にchangeをトリガーします_

すべての入力タイプ(35e7aa43f801f4836305ee25800988ce52003767)で変更イベントをリッスンするようにChangeEventPluginを編集すると、上記のすべてのブラウザーでのReactの変更および入力イベント処理が修正されるようです。 プルリクエストを行う必要がありますか、それともプラグインが欠落しているファイル入力でchangeイベントのみをリッスンしていた理由がありますか?

Reactする必要のあるウィジェットを移植しようとしたときに、この問題が発生しました。
コアの誰かが@eddhannayの提案が

@locks独自に実装することをお勧めします。すべてのHTML入力要素には、正規化が難しく、基本的にスタイルが設定できない多数の不整合が含まれている

@syranide少なくともほとんどの場合、合理的にすべての組み込み入力をサポートするように

@spicyj確かに! しかし、修正できない奇妙なことがたくさんあります...厳密に数値でない場合はtype="number"の値を読み取れないなどです。

+1

範囲入力用のブラウザーonchangeで、シンセonChangeを起動するためにIE10 +が反応するための回避策

IE10 +の入力の+1はonChangeを起動します

+1からすべての+1

連絡あった? 範囲入力はIE11でもまだ壊れています。
ただし、Edgeではうまく機能します。

これを適用するには+1。 Edgeでも動作しません

IE11では機能しません。

+1

価値があるものとして、これがコアで解決されている間に回避策コンポーネントを作成しました: https

+1、誰もが反応する作業が大好きですが、発見から2年が経過しているため、このバグを修正することを優先する必要があると思います。

@dancoates申し訳ありませんが、これは私たちにとってあなたよりも優先度が低くなっています。 ただし、プルリクエストを送信してください。 ChangeEventPluginは少し毛深いですが、私のブログ投稿はhttp://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.htmlです。あなたに一般的な戦略のアイデアを与えるはずです。 範囲要素の場合、入力イベントと変更イベントの両方をリッスンし、どちらかが発生したときにイベントを発生させる必要があります(ただし、両方が発生した場合でも1回だけ)。

申し訳ありませんが、トリッキーなものだと思います。 ChangeEventPluginを見て、私が助けることができるかどうかを確認します。
おそらく、ドキュメントの警告セクションは、変更が実行されない理由を疑問に思う人々を助けるでしょう? このスレッドは簡単に見つけることができると思いますが。

:+1:これが修正されるのを楽しみにしています!

今のところ問題にどう対処したか
私が使用するために、 onMouseUpイベントに同じイベントを追加するだけで、すべてのIE10以降とEdgeで機能します。

値はmouseupイベントでのみ変更されるため、まったく同じ結果は得られませんが、(とにかく私の場合は)美しく劣化すると思います。

私もこれに遭遇しました、そしてそれが修正されるのを見たいです。

回避策の提案をありがとう。 「onClick」または「onMouseup」イベントを追加することは非常に役に立ちましたが、ユーザーがスライダーを離すまで何も起こらないというのは依然として最適ではありません。

ユーザーがドラッグしている間に更新を取得する方法を説明しているStackOverflowでこれをチェックしてください...

なぜこれが閉鎖されているのですか? これはまだ問題です-私たちのテストでは、IE11ではonChangeはまったく起動しません。 https://github.com/mapbox/react-rangeの使用を強制

15.3.2を使用しており、この問題が発生しています。 それ以降の3つのマイナーリリースのリリースノートを見ると、これが修正されているとは思えません。 なぜ閉鎖されているのですか? 問題https://github.com/facebook/react/issues/8168はそれの追跡ケースのようですが、この問題には問題のより完全な説明があるようです。

上記の履歴を見ると、問題は#5746によってクローズされたことがわかります。
このPRを開くと、マイルストーンが16に設定されていることがわかります。

したがって、修正は16になり、動作に重大な変更が加えられるため、15.xに修正することはできません。

15.xにバックポートできるかどうかわかりません。 @jquense@nhunzakerはおそらくこれに答えることができるでしょう。

可能です! PRもあります:)すでに#8575

いいね。 レビューを待っているそこにぶら下がっているDOMPRのリストを作成できますか?
次に、それらを#8583のアンブレラに追加して、関連するケースで手動テストを行うようにします。

https://github.com/facebook/react/pull/8575が私のtodoリストにあります。 ローカルでいくつかのものをテストする必要があります。そうすれば、マージするのは👍になると思います。 確認する機会がありましたら、必ず#8583に関連するケースをいくつか追加します。

このためのブラウザテストフィクスチャに取り組んでいる人はいますか? そうでなければ、私はそれを書く時間があります。

私はそれを計画していましたが、まだ少し時間がありました。 お気軽にご参加ください

心配ない。 作成するテストケースは他にもたくさんあります。 https://github.com/facebook/react/issues/8308に関連するPRを入手しました

今日、WindowsPhoneでこの問題が発生しました。 onChangeで指定したメソッドは呼び出されません。 修正はいつ適用されますか?

これは15.6.xでリリースされました。

このページは役に立ちましたか?
0 / 5 - 0 評価