input type=“number” mouse wheel does not scroll

2020-04-02 07:06发布

站内问答 / 后端开发
1989 3 5

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

标签： html input
举报
3条回答
▲ chillily
2楼-- · 2020-04-02 07:34

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

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
3楼-- · 2020-04-02 07:40

To avoid the browser issue altogether, you might try using the jQuery mousewheel plugin to manually change your input value. For example:

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scroll.js"></script>
</head>
<body>
    <form action="">
        <input id="myInput" type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

scroll.js

$(function() {
    $('#myInput').on("mousewheel", function(event) {
        event.preventDefault();
        $this = $(this);
        $inc = parseFloat($this.attr('step'));
        $max = parseFloat($this.attr('max'));
        $min = parseFloat($this.attr('min'));
        $currVal = parseFloat($this.val());

        // If blank, assume value of 0
        if (isNaN($currVal)) {
            $currVal = 0.0;
        }

        // Increment or decrement numeric based on scroll distance
        if (event.deltaFactor * event.deltaY > 0) {
            if ($currVal + $inc <= $max) {
                $this.val($currVal + $inc);
            }
        } else {
            if ($currVal - $inc >= $min) {
                $this.val($currVal - $inc);
            }
        }
    });
});

Works for me in both Chrome and Firefox. The mousewheel event can be triggered when the mouse is hovering over the input as well, not just when it is selected.

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
4楼-- · 2020-04-02 07:44

So I think I figured it out.

First I copied your code into a html document and opened it in Chrome, and the increment didn't work. Second I removed everything from the code except the input box, still didn't work.

Then I injected that code into random websites using the chrome inspector, I tried it on gmail, reddit and my own website. Gmail worked, reddit worked, but my own website didn't work.

So then I disabled javascript and it didn't work anywhere.

So to answer your question, stackoverflow / many other sites use javascript that automatically add that functionality to number inputs.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)