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
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.
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.
