Arrows not working on input type="number"

Question

I used a simple html

<input type="number">

It is showing a text box with up and down arrows but the arrows are not working. The value can be incremented/decremented with arrows on keyboard and mouse scroll, but when I click on any of the arrows, it seems that the down arrow is clicked and the value in the box remains the same. Please suggest what should I do!

Answer 1

Well I'm surprised by this but it looks like a bug, at least in Chrome. (Edge doesn't show the arrows at all and Firefox behaves correctly.)

The mousemove event listener (on the element or the document) breaks the INPUT TYPE="number" if an e.preventDefault() is present:

<input type="number" value="1"/>

$(function() {
    $(document).on('mousemove', function (e) {
        e.preventDefault();
    });
});

See https://jsfiddle.net/MCAU/Lpojfrm2/

Can anyone confirm this?

Answer 2

You can try this:

HTML

<div id="incdec">
<input type="text" value="0" />
<img src="up_arrow.jpeg" id="up" />
<img src="down_arrow.jpeg" id="down" />
</div>

JQuery

$(document).ready(function(){
$("#up").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())+1);
});

$("#down").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())-1);
});

});