输入类型=“数字”鼠标滚轮不滚动 [英] input type="number" mouse wheel does not scroll
问题描述
我很难过为什么鼠标滚轮不会在一个简单的表单元素中增加/减少值。
jsdata-hide =false>< input type =数字step =0.125min =0max =0.875>
b $ b
它适用于这个片段，但不是当我创建一个简单的通用html文档时：
< ;！DOCTYPE html>
< html>
< head>< / head>
< body>
< form action =>
< input type =numberstep =0.125min =0max =0.875>
< / form>
< / body>
< / html>
当我在多个浏览器中查看时，鼠标滚轮不会滚动。我禁用了浏览器扩展等。我身边的其他几台机器的行为方式也是一样。
导致此问题无效的原因是什么？这是一个OS /浏览器的问题吗？
我几乎觉得这可能是更深层的东西，可能是鼠标/驱动程序问题的类型？
我测试过的内容： IE9 - 失败 OSX
Snippet在IFRAME中运行。把你的代码放到IFRAME中，它也可以工作。为什么 - 我不知道，但它的工作原理。
http://codecorner.galanter.net/bla2.htm - 不起作用（代码本身）
http://codecorner.galanter.net/bla.htm - 作品 - IFRAME中的上一页 p>
编辑：下面是它在Chrome 41中的一个演示： http://codecorner.galanter.net/bla_mousescroll.mp4
编辑2：我想我已经明白了，它不是IFRAME。为了使滚动事件发生 - 实际的内容必须是可滚动的。例如，如果您重做您的示例是这样的：
<！DOCTYPE html>
< html>
< head>< / head>
< body>
< form action =style =width：200px; overflow：scroll>
< div style =width：300px>
< input type =numberstep =0.125min =0max =0.875>
< / div>
< / form>
< / body>
< / html>
其中容器形式小于其内容 - DIV - 滚动轮在数字字段上工作： http://codecorner.galanter.net/bla3.htm
I'm stumped why the mousewheel will not increment/decrement the value in a simple form element.
<input type="number" step="0.125" min="0" max="0.875">
It works on this snippet just fine, but not when I create a simple generic html document:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="">
<input type="number" step="0.125" min="0" max="0.875">
</form>
</body>
</html>
When I view this in several browsers, the mousewheel does not scroll. I've disabled browser extensions and such as well. Several other machines around me behave the same way.
What causes this to not work? Is this an OS/browser issue?
I almost feel like this might be something deeper, possibly the type of mouse/driver issue?
What I have tested on:
- Win 7
- Chrome - fail
- Firefox - fail
- Firefox Dev Edition - fail
- Safari - pass
- IE11 - fail
IE9 - fail
OSX
- Chrome - fail
- Safari - fail
- Firefox - fail
Snippet runs in an IFRAME. Put your code into IFRAME and it will work too. Why - I don't know but it works.
i.e.
http://codecorner.galanter.net/bla2.htm - doesn't work (code by itself) http://codecorner.galanter.net/bla.htm - works - previous page in an IFRAME
EDIT: Here's a demo of it working in Chrome 41: http://codecorner.galanter.net/bla_mousescroll.mp4
EDIT 2: I think I figured it out, and it's not IFRAMEs. In order for scroll event to happen - actual content has to be scrollable. For example if you redo your example like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="" style="width:200px;overflow:scroll">
<div style="width:300px">
<input type="number" step="0.125" min="0" max="0.875">
</div>
</form>
</body>
</html>
where container form is smaller then its content - DIV - the scrolling wheel works on number field: http://codecorner.galanter.net/bla3.htm
这篇关于输入类型=“数字”鼠标滚轮不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
