React: input type = range onChange должен срабатывать при изменении значения с помощью клавиш со стрелками на клавиатуре

Chrome не запускает событие input когда диапазон изменяется с помощью клавиш со стрелками, но Firefox это делает.

Chrome запускает событие изменения, когда вы меняете его с клавиатуры. Можно ли использовать изменение вместо ввода?

В бета-версии Chrome и Firefox изменение не срабатывает при перетаскивании до момента появления курсора мыши, поэтому здесь также следует прослушивать ввод.

Я сделал JSFiddle, чтобы проверить это: http://jsfiddle.net/vqnMU/embedded/result/

React, похоже, ожидает input и запускает input & change всякий раз, когда это происходит.

Фокусировка ползунка и нажатие вправо:

| Браузер | Событие | React Event |
| --- | --- | --- |
| Хром 34.0.1847.131 * | - || Изменить |
Chrome Canary | Ввод, изменение ||
| IE 10 | Изменить | - |

* _Firefox запускает change при размытии_

Дополнительно для перетаскивания:

| Браузер | Событие | React Event |
| --- | --- | --- |
| Хром 34.0.1847.131 | Ввод * | Ввод, изменение |
| Safari 7.0.3 | Ввод, изменение | Ввод, изменение |
| Chrome Canary | Ввод * | Ввод, изменение |
| Firefox 29 | Ввод * | Ввод, изменение |
| IE 10 | Изменить | - |

* _Все браузеры запускают change при перетаскивании end_

Редактирование ChangeEventPlugin для прослушивания событий изменений для всех типов ввода (35e7aa43f801f4836305ee25800988ce52003767), по-видимому, исправляет изменение и обработку событий ввода React для всех вышеперечисленных браузеров. Должен ли я сделать запрос на перенос или есть причина, по которой плагин прослушивал только события change на входных данных файла, которые мне не хватает?

Я столкнулся с этой проблемой при попытке перенести виджет на React.
Может ли кто-нибудь из ядра дать отзыв о том, сработает ли предложение

@locks Я бы порекомендовал реализовать свой собственный, похоже, что все элементы ввода HTML имеют кучу несоответствий, которые трудно нормализовать и которые в основном нестиль: способны.

@syranide Я думаю, что мы должны попытаться поддерживать все встроенные входы, по крайней мере, в большинстве случаев.

@spicyj Конечно! Но есть много странных вещей, которые мы не можем исправить ... например, невозможность прочитать значение type="number" если оно не является строго числовым и т. Д.

+1

Любой обходной путь для IE10 +, чтобы реагировать на запуск синтезатора onChange, при изменении браузера для входных значений диапазона

+1 для ввода на IE10 + стрельба onChange

+1 ко всем +1

любые новости? ввод диапазона все еще не работает в IE 11.
Однако отлично работает на Edge.

+1 для применения. У меня не работает даже на Edge

Не работает в 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. @jquense и @nhunzaker , вероятно, смогут ответить на этот вопрос.

Возможно! Есть даже пиар :) уже # 8575

О, классно. Можете ли вы составить список DOM PR, которые там ждут проверки?
Затем добавьте их к зонту в # 8583, чтобы соответствующие случаи прошли ручные тесты.

https://github.com/facebook/react/pull/8575 в моем списке дел. Просто нужно протестировать кое-что локально, а затем, я думаю, мы будем 👍 объединяться. Я обязательно добавлю несколько подходящих дел в № 8583, когда у меня будет возможность просмотреть его

Кто-нибудь работает над приспособлением для тестирования браузера для этого? Если нет, у меня есть время написать его.

Я планировал это, но пока еще не успел. не стесняйтесь прыгать

Без проблем. Есть много других тестовых примеров, которые нужно написать. У меня есть пиар по адресу https://github.com/facebook/react/issues/8308. Я переключусь на это.

Сегодня я столкнулся с этой проблемой на своем телефоне с Windows. Он не вызывает метод, указанный в onChange. Когда будет применено исправление?

Это было выпущено в 15.6.x.