React: input type = range onChange harus diaktifkan saat mengubah nilai menggunakan tombol panah keyboard

Chrome tidak mengaktifkan peristiwa input saat rentang diubah menggunakan tombol panah, tetapi Firefox melakukannya.

Chrome mengaktifkan peristiwa 'perubahan' saat Anda mengubahnya dengan keyboard. Mungkinkah menggunakan 'ubah' alih-alih masukan?

Di Chrome beta dan Firefox, 'perubahan' tidak menyala saat menyeret hingga mouseup jadi kita harus mendengarkan masukan di sini juga.

Saya membuat JSFiddle untuk menguji ini: http://jsfiddle.net/vqnMU/embedded/result/

React sepertinya mendengarkan input , dan memicu input & change setiap kali itu terjadi.

Memfokuskan slider dan menekan kanan:

| Browser | Acara | React Event |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | - || Ubah |
Chrome Canary | Masukan, Ubah ||
| IE 10 | Ubah | - |

* _Firefox memicu change pada blur_

Selain itu untuk menyeret:

| Browser | Acara | React Event |
| --- | --- | --- |
| Chrome 34.0.1847.131 | Masukan * | Masukan, Ubah |
| Safari 7.0.3 | Masukan, Ubah | Masukan, Ubah |
| Chrome Canary | Masukan * | Masukan, Ubah |
| Firefox 29 | Masukan * | Masukan, Ubah |
| IE 10 | Ubah | - |

* _Browser ini semuanya memicu change saat menyeret end_

Mengedit ChangeEventPlugin untuk mendengarkan peristiwa perubahan pada semua jenis masukan (35e7aa43f801f4836305ee25800988ce52003767) tampaknya memperbaiki penanganan peristiwa perubahan & masukan React untuk semua browser di atas. Haruskah saya membuat permintaan penarikan, atau apakah ada alasan bahwa plugin hanya mendengarkan peristiwa change pada input file yang saya lewatkan?

Saya baru saja mengalami masalah ini saat mencoba mem-port widget yang saya miliki ke React.
Dapatkah seseorang di inti memberikan umpan balik tentang apakah saran @eddhannay akan / tidak berhasil? Terima kasih :)

@locks Saya akan merekomendasikan menerapkan milik Anda sendiri, sepertinya semua elemen input HTML datang dengan banyak inkonsistensi yang mungkin sulit untuk dinormalisasi dan pada dasarnya tidak bergaya: mampu.

@syranide Saya pikir kita harus berusaha untuk mendukung semua input

@spicyj Pasti! Tetapi ada banyak hal aneh yang tidak dapat kami perbaiki ... seperti tidak dapat membaca nilai type="number" jika tidak benar-benar numerik, dll.

+1

Solusi apa pun untuk IE10 + agar bereaksi untuk mengaktifkan onChange synth, di browser onchange untuk input rentang

1 untuk masukan tentang IE10 + pengaktifan onChange

+1 untuk semua +1

ada berita? input range masih rusak di IE 11.
Berfungsi dengan baik di Edge.

1 untuk menerapkannya. Tidak bekerja untuk saya bahkan di Edge

Tidak bekerja di IE 11.

+1

Untuk apa nilainya, saya membuat komponen work around sementara ini dikerjakan pada intinya: https://github.com/mapbox/react-range

+1, Sukai pekerjaan yang dilakukan semua orang saat bereaksi, tetapi saya merasa bug ini harus menjadi prioritas yang lebih tinggi untuk diperbaiki karena kita mendekati tanda 2 tahun dari penemuannya.

@dancoates Saya minta maaf karena ini adalah prioritas yang lebih rendah bagi kami daripada Anda. Jangan ragu untuk mengirim permintaan tarik! ChangeEventPlugin sedikit berbulu tapi posting blog saya di http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html akan memberi Anda gambaran tentang strategi umum. Untuk elemen rentang, kita harus mendengarkan peristiwa masukan dan perubahan serta peristiwa yang diaktifkan saat terjadi (tetapi hanya sekali meskipun keduanya terjadi).

Tidak perlu minta maaf, saya sadar ini rumit. Saya akan melihat ChangeEventPlugin dan melihat apakah saya dapat membantu.
Mungkin bagian peringatan di dokumen akan membantu orang bertanya-tanya mengapa perubahan tidak diaktifkan? Padahal saya rasa utas ini cukup mudah ditemukan.

: +1: akan senang melihat ini diperbaiki!

Bagaimana saya menangani masalah untuk saat ini
Untuk penggunaan saya, saya hanya menambahkan acara yang sama pada acara onMouseUp dan berfungsi untuk semua IE 10 ke atas dan Edge.

Itu tidak memberikan hasil yang persis sama karena nilainya hanya berubah pada acara mouseup tetapi saya pikir (untuk kasus saya) bahwa itu menurun dengan indah.

Saya juga mengalami ini & ingin melihatnya diperbaiki.

Terima kasih atas saran untuk penyelesaiannya. Menambahkan peristiwa "onClick" atau "onMouseup" sangat membantu, tetapi masih kurang optimal sehingga tidak ada yang terjadi sampai pengguna melepaskan penggeser.

Lihat ini di StackOverflow yang menjelaskan cara untuk mengatasi mendapatkan pembaruan saat pengguna menyeret ...

Mengapa ini ditutup? Ini masih menjadi masalah - onChange tidak menyala sama sekali di IE11 dalam pengujian kami. Dipaksa menggunakan https://github.com/mapbox/react-range

Kami menggunakan 15.3.2, dan mengalami masalah ini. Melihat catatan rilis untuk tiga rilis minor sejak itu, saya tidak melihat bahwa ini telah diperbaiki. Kenapa ditutup? Masalah https://github.com/facebook/react/issues/8168 tampaknya menjadi kasus pelacakan untuk itu, tetapi tampaknya masalah ini memiliki deskripsi masalah yang jauh lebih menyeluruh.

Jika Anda melihat riwayat di atas, Anda akan melihat bahwa masalah ditutup oleh # 5746.
Jika Anda membuka PR ini, Anda akan melihat bahwa milestone ditetapkan ke 16.

Jadi perbaikannya akan ada di 16, dan kita tidak bisa memasukkannya ke 15.x karena itu memperkenalkan perubahan perilaku yang dapat mengganggu.

Saya tidak tahu apakah mungkin untuk melakukan backport ke 15.x. @jquense dan @nhunzaker kemungkinan besar bisa menjawab ini.

Itu mungkin! Bahkan ada PR :) sudah # 8575

Oh bagus. Bisakah Anda membuat daftar DOM PR yang menunggu di sana menunggu tinjauan?
Kemudian tambahkan ke payung di # 8583 sehingga kasing yang relevan memiliki tes manual.

https://github.com/facebook/react/pull/8575 ada di daftar agenda saya. Hanya perlu menguji beberapa hal secara lokal dan kemudian saya pikir kita akan 👍 bergabung. Saya akan memastikan untuk menambahkan beberapa kasus yang relevan ke # 8583 ketika saya mendapat kesempatan untuk meninjaunya

Adakah yang bekerja pada perlengkapan uji browser untuk ini? Jika tidak, saya punya waktu untuk menuliskannya.

Saya berencana untuk itu tetapi belum punya waktu. merasa bebas untuk bergabung

Jangan khawatir. Ada banyak kasus uji lain untuk ditulis. Saya punya PR terkait dengan https://github.com/facebook/react/issues/8308. Saya akan pindah persneling untuk itu.

Saya mengalami masalah ini hari ini di ponsel Windows saya. Itu tidak memanggil metode yang saya tentukan di onChange. Kapan perbaikan akan diterapkan?

Ini telah dirilis di 15.6.x.