React: 输入类型=范围onChange使用键盘箭头键更改值时应触发

创建于 2013-11-17  ·  33评论  ·  资料来源: facebook/react

DOM starter Bug

最有用的评论

为什么关闭? 这仍然是一个问题-在我们的测试中,onChange根本不会在IE11中触发。 强制使用https://github.com/mapbox/react-range

所有33条评论

使用箭头键修改范围时,Chrome不会触发input事件,但Firefox会触发。

当您使用键盘进行更改时,Chrome会触发“更改”事件。 可以使用“更改”代替输入吗?

在Chrome浏览器Beta和Firefox中,拖动直到鼠标上移都不会触发“更改”,因此我们也应该在此处收听输入。

我做了一个JSFiddle来对此进行测试: http :

React似乎在监听input ,并在每次发生时触发inputchange

聚焦滑块并向右按:

| 浏览器大事记反应事件
| --- | --- | --- |
| 铬34.0.1847.131 * | -|| 变更|
铬金丝雀| 输入,更改||
| IE 10 | 变更| -|

* _Firefox在blur_上触发change

另外用于拖动:

| 浏览器大事记反应事件
| --- | --- | --- |
| 铬34.0.1847.131 | 输入* | 输入,更改|
| Safari 7.0.3 | 输入,更改| 输入,更改|
| 铬金丝雀| 输入* | 输入,更改|
| Firefox 29 | 输入* | 输入,更改|
| IE 10 | 变更| -|

* _这些浏览器都在拖动end_时触发change

编辑ChangeEventPlugin以侦听所有输入类型(35e7aa43f801f4836305ee25800988ce52003767)上的更改事件似乎可以修复上述所有浏览器的React更改和输入事件处理。 我应该发出请求请求,还是有原因导致插件仅侦听我丢失的文件输入中的change事件?

我只是在尝试移植我必须要进行响应的小部件时遇到了这个问题。
核心人员是否可以就@eddhannay的建议是否会提供一些反馈? 谢谢 :)

@locks我建议您实现自己的unstyle:able的。

@syranide我认为我们应该至少尽可能合理地支持所有内置输入。

@spicyj当然! 但是有很多奇怪的事情我们无法解决...例如如果它不是严格的数字,则无法读取type="number"的值,等等。

+1

IE10 +做出反应以触发合成器onChange的任何解决方法,在浏览器onchange上输入范围

+1用于IE10上的输入+触发onChange

+1 +1

任何新闻? 范围输入在IE 11中仍然断开。
不过,在Edge上效果很好。

+1即可应用。 即使在Edge上也对我不起作用

在IE 11中不起作用。

+1

对于它的价值,我创建了一个围绕组件的工作,而该工作已在核心中完成: https

+1,喜欢每个人都在做的工作,但我确实觉得应该更优先考虑解决此错误,因为我们正从发现它的那两年开始。

@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可能可以回答这个问题。

有可能的! 甚至还有一个PR :)已经#8575

不错哦。 您可以列出挂在这里等待审查的DOM PR的列表吗?
然后将它们添加到#8583中的保护伞中,以便对相关案例进行手动测试。

https://github.com/facebook/react/pull/8575在我的待办事项列表上。 只需在本地测试一些东西,然后我认为我们将合并。 当我有机会对其进行审查时,我将确保在#8583中添加一些相关案例

有人为此工作在浏览器测试夹具上吗? 如果没有,我有一些时间写一个。

我当时正在计划,但还没有片刻。 随意跳进去

别担心。 还有很多其他测试用例需要编写。 我有一个与https://github.com/facebook/react/issues/8308相关的PR

我今天在Windows手机上遇到了这个问题。 它不会调用我在onChange中指定的方法。 该修复程序什么时候应用?

它已在15.6.x中发布。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

sebmarkbage picture sebmarkbage  ·  136评论

gaearon picture gaearon  ·  104评论

wohali picture wohali  ·  128评论

brunolemos picture brunolemos  ·  285评论

gaearon picture gaearon  ·  227评论