CODEWITHSUNDEEP
htmlcss
Surya Purohit
Surya Purohit

Reputation: 1120

Arrows not working on input type="number"

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!

Upvotes: 8

Views: 21724

Answers (6)

Pietro
Pietro

Reputation: 177

For me arrows were displayed on desktop Chrome but I tried so hard to restore arrows form mobile browsers like mobile Chrome, I tried many solutions without success.

Eventually I decided to make some nice buttons on the sides of the input. I made the code and you can add as many buttons as you want as long as you respect the id numeration. I invite you to look at the snippet I posted on this other similar post.

https://stackoverflow.com/a/68679616/13795525

Upvotes: 0

MSC
MSC

Reputation: 3386

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?

Upvotes: 9

Surya Purohit
Surya Purohit

Reputation: 1120

After so much of attempts removing JS CSS n all. Come to know that "ember-view" class was creating the issue. I was using ember and the div in which I was using input type="number" was having class "ember-view". Removing that class makes the textbox work good :). Thanks. Earlier

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

Now

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

Upvotes: 1

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

Try it. input field need focus to increment/decrement value.

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

Upvotes: 0

Jibin Balachandran
Jibin Balachandran

Reputation: 3441

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

});

Upvotes: 2

Jibin Balachandran
Jibin Balachandran

Reputation: 3441

Try this:

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

Here in step option give the value you want to increment or decrement to the value.i.e if you set step=0.5 and your value is 5 on click up arrow it will change the value to 5.5

I hope this will work for you

Upvotes: 0

Related Questions