Menu
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:
IE9 - fail
OSX
632
Using inputmode=”numeric” attribute you can find an input box without an arrow.
Move your fingers between the top and bottom of your touchpad to scroll up and down, or move your fingers across the touchpad to scroll sideways. Be careful to space your fingers a bit apart. If your fingers are too close together, they just look like one big finger to your touchpad.
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.
146
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
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
