CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
John Stimac
John Stimac

Reputation: 5491

Make my html input number fields change on scroll wheel even if they aren't focused in Chrome

Take an input field like this:

​<input type='number' step='1' />​​​​​​​​​​​​​​​​​

In Chrome, you can change the value of this field by clicking on it then moving the scroll wheel up or down. However, you cannot simply hover over the field and use the scroll wheel to change it (like you can in Opera). How can I change this behavior so that I don't have to select the field to change it with the scroll wheel? I'm open to solutions using javascript/jQuery (but not jQuery UI). I'm using Chrome 21 for Linux if that matters.

Upvotes: 1

Views: 3407

Answers (3)

Andy
Andy

Reputation: 1

To make numeric or time input to be wheelable, you only need to add empty onmousewheel handler to at least one control on page: 

<input type="time" value="12:00" onmousewheel="onWheel()"/>

<script>
  function onWheel() { }
</script>

Checked on Chrome and it works well for all controls on page.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94339

Focus the input field when mouseover:

$("input[type='number']").mouseover(function(){
    this.focus();
});​

Demo: http://jsfiddle.net/DerekL/Yeqmp/2/

Upvotes: 1

Quincy
Quincy

Reputation: 4433

Using hover()

    $("#spinner").hover(
        function()
        {
            $(this).focus();
        },
        function(){
            $(this).blur();
        }
);​

http://jsfiddle.net/Yeqmp/3/

Upvotes: 3

Related Questions