React: نوع الإدخال = النطاق عند التغيير يجب إطلاقه عند تغيير القيمة باستخدام مفاتيح الأسهم في لوحة المفاتيح

لا يطلق Chrome الحدث input عندما يتم تعديل النطاق باستخدام مفاتيح الأسهم ، ولكن Firefox يفعل ذلك.

يطلق Chrome حدث "تغيير" عند تغييره باستخدام لوحة المفاتيح. هل من الممكن استخدام "التغيير" بدلاً من الإدخال؟

في Chrome beta و Firefox ، لا يتم تنشيط "التغيير" عند السحب حتى الماوس ، لذا يجب علينا الاستماع إلى الإدخال هنا أيضًا.

لقد صنعت JSFiddle لاختبار هذا: http://jsfiddle.net/vqnMU/embedded/result/

يبدو أن React تستمع لـ input ، وتؤدي إلى تشغيل input & change كلما حدث ذلك.

التركيز على شريط التمرير والضغط على اليمين:

| المستعرض | حدث | رد فعل الحدث |
| --- | --- | --- |
| كروم 34.0.1847.131 * | - || تغيير |
كروم كناري | الإدخال ، التغيير ||
| آي إي 10 | تغيير | - |

* _ Firefox يطلق change على blur_

بالإضافة إلى السحب:

| المستعرض | حدث | حدث رد الفعل |
| --- | --- | --- |
| كروم 34.0.1847.131 | الإدخال * | الإدخال ، التغيير |
| سفاري 7.0.3 | الإدخال ، التغيير | الإدخال ، التغيير |
| كروم كناري | الإدخال * | الإدخال ، التغيير |
| فايرفوكس 29 | الإدخال * | الإدخال ، التغيير |
| آي إي 10 | تغيير | - |

* _ هذه المتصفحات كلها تؤدي إلى change عند نهاية السحب_

يبدو أن تحرير ChangeEventPlugin للاستماع إلى أحداث التغيير على جميع أنواع المدخلات (35e7aa43f801f4836305ee25800988ce52003767) لإصلاح معالجة حدث التغيير والإدخال في React لجميع المتصفحات المذكورة أعلاه. هل يجب أن أقدم طلب سحب ، أم أن هناك سببًا لأن المكون الإضافي كان يستمع فقط لأحداث change على مدخلات الملف التي فقدتها؟

لقد واجهت هذه المشكلة للتو عند محاولة نقل عنصر واجهة مستخدم يجب أن أتفاعل معه.
هل يمكن لأي شخص في جوهر تقديم بعض الملاحظات حول ما إذا كان

locks أوصي بتنفيذ ما نمطية: قادرة.

syranide أعتقد أننا يجب أن نحاول دعم جميع المدخلات المضمنة على الأقل بشكل معقول.

تضمين التغريدة ولكن هناك الكثير من الأشياء الغريبة التي لا يمكننا إصلاحها ... مثل عدم القدرة على قراءة قيمة type="number" إذا لم تكن رقمية بدقة ، إلخ.

+1

أي حل بديل لـ IE10 + للرد على إطلاق موالفة عند التغيير ، عند تغيير المستعرض لإدخالات النطاق

+1 للإدخال في IE10 + إطلاق عند التغيير

+1 لجميع +1

أى اخبار؟ لا يزال إدخال النطاق مكسورًا في IE 11.
يعمل بشكل رائع على Edge.

+1 لتطبيق ذلك. لا يعمل معي حتى على الحافة

لا يعمل في IE 11.

+1

لما يستحق ، لقد أنشأت عملًا حول المكون أثناء عمل هذا في الأساس: https://github.com/mapbox/react-range

+1 ، أحب العمل الذي يقوم به الجميع في رد الفعل ، لكني أشعر أن هذا الخطأ يجب أن يكون ذا أولوية أعلى لإصلاح الرؤية حيث نقترب من عام 2 من اكتشافه.

dancoates أنا آسف لأن هذا يمثل أولوية أقل بالنسبة لنا مقارنة بك. لا تتردد في إرسال طلب سحب رغم ذلك! ChangeEventPlugin مشعر قليلاً لكن منشور مدونتي على http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html يجب أن يعطيك فكرة عن الإستراتيجية العامة. بالنسبة لعناصر النطاق ، يجب أن نستمع إلى كل من أحداث الإدخال والتغيير وأحداث إطلاق النار عندما يحدث أي منهما (ولكن مرة واحدة فقط حتى إذا حدث كلاهما).

لا داعي لأن تكون آسفًا ، فأنا أدرك أنه أمر صعب. سألقي نظرة على ChangeEventPlugin وأرى ما إذا كان بإمكاني المساعدة.
ربما يساعد قسم التحذيرات في المستندات الأشخاص الذين يتساءلون عن سبب عدم إطلاق التغييرات؟ على الرغم من أنني أعتقد أن هذا الموضوع سهل بما يكفي للعثور عليه.

: +1: أحب أن أرى هذا ثابتًا!

كيف تعاملت مع المشكلة في الوقت الحالي
لاستخدامي ، قمت ببساطة بإضافة نفس الحدث في حدث onMouseUp وهو يعمل لجميع IE 10 وما فوق و Edge.

إنها لا تعطي نفس النتيجة بالضبط لأن القيمة تتغير فقط في حدث mouseup لكنني أعتقد (بالنسبة لحالتي على أي حال) أنها تتدهور بشكل جميل.

واجهت أيضًا هذا وأحب أن أراه ثابتًا.

شكرا لاقتراحات الحلول. كانت إضافة حدث "onClick" أو "onMouseup" مفيدة جدًا ، ولكن لا يزال الأمر دون المستوى الأمثل ألا يحدث شيء حتى يترك المستخدم شريط التمرير.

تحقق من هذا على StackOverflow الذي يشرح طريقة لمعالجة الحصول على التحديثات أثناء سحب المستخدم ...

لماذا هذا مغلق؟ لا تزال هذه مشكلة - لا يتم تشغيل onChange على الإطلاق في IE11 في اختبارنا. اضطر لاستخدام https://github.com/mapbox/react-range

نحن نستخدم الإصدار 15.3.2 ، ونواجه هذه المشكلة. بالنظر إلى ملاحظات الإصدار الخاصة بالإصدارات الثلاثة الثانوية منذ ذلك الحين ، لا أرى أنه تم إصلاح ذلك. لماذا تم إغلاقه؟ يبدو أن المشكلة https://github.com/facebook/react/issues/8168 هي حالة التتبع لها ، ولكن يبدو أن هذه المشكلة تحتوي على وصف أكثر شمولاً للمشكلة.

إذا نظرت إلى السجل أعلاه ، فسترى أنه تم إغلاق المشكلة بواسطة # 5746.
إذا فتحت هذا PR ، فسترى أنه تم تعيين معلمه على 16.

لذا سيكون الإصلاح في 16 ، ولا يمكننا وضعه في 15.x لأنه يقدم تغييرًا جذريًا في السلوك.

لا أعرف ما إذا كان من الممكن نقله إلى 15.x. من المحتمل أن يتمكن nhunzaker من الإجابة على هذا السؤال.

إنه ممكن! حتى أن هناك PR :) بالفعل # 8575

آه لطيف. هل يمكنك عمل قائمة بـ DOM PRs المعلقة هناك في انتظار المراجعة؟
ثم قم بإضافتها إلى المظلة رقم 8583 بحيث يكون للحالات ذات الصلة اختبارات يدوية.

https://github.com/facebook/react/pull/8575 موجود في قائمة المهام الخاصة بي. فقط بحاجة إلى اختبار بعض الأشياء محليًا وبعد ذلك أعتقد أننا سنقوم بدمجها. سأتأكد من إضافة بعض الحالات ذات الصلة إلى # 8583 عندما تسنح لي الفرصة لمراجعتها

أي شخص يعمل على أداة اختبار المتصفح لهذا؟ إذا لم يكن الأمر كذلك ، فلدي بعض الوقت لكتابة واحدة.

كنت أخطط لذلك ولكن لم يكن لدي لحظة حتى الآن. لا تتردد في القفز

لا داعى للقلق. هناك الكثير من حالات الاختبار الأخرى التي يجب كتابتها. لقد حصلت على علاقات عامة متعلقة بـ https://github.com/facebook/react/issues/8308. سوف أقوم بتحويل التروس إلى ذلك.

لقد واجهت هذه المشكلة اليوم على هاتف Windows الخاص بي. لا يستدعي الطريقة التي حددتها في onChange. متى سيتم تطبيق الإصلاح؟

تم إصدار هذا في 15.6.x.