Arrows do not work on input type = "number"

Question

I used simple html

<input type="number"> 

It shows a text box with up and down arrows, but the arrows do not work. The value can be increased / decreased by the arrows on the keyboard and mouse scroll, but when I click on any of the arrows, it seems that the down arrow is pressed and the value in the field remains unchanged. Please suggest what to do!

Answer 1

After so many attempts to remove JS CSS n. Understand that the "ember-view" class was creating the problem. I used ember and the div in which I used the input type = "number" had the class "ember-view". Removing this class makes the text field workable :). Thank you Earlier

 <div class="ember-view"> <input type="number"> </div> 

Now

 <div> <input type="number"> </div> 

Answer 2

Well, I am surprised at this, but it seems like an error, at least in Chrome. (Edge doesn't show arrows at all, and I have no other browsers.)

The mousemove event listener (on an element or document) breaks INPUT TYPE = "number" if 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 3

Try the following:

 <input type="number" step="1" > 

Here, in the step, specify the value that you want to increase or decrease to the .ie value, if you set step = 0.5, and your value is 5 on the up arrow, it will change the value to 5.5

I hope this works for you.

Answer 4

You can try the following:

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); }); }); 

Answer 5

Give it a try. the input field requires focus to increase / decrease the value.

 <input type="number" autofocus="autofocus">