Jquery UI Spinner - Disable Keyboard Input

Question

Im trying to find away to stop a user using the keyboard to input values via jquery ui spinners. I have several spinners and would like it to only allow the user to use the up and down arrows to increase or decrease the value.

Ive tried looking round stackoverflow and google and cant seem to find somethign that works.

So I have for example and input like this:

<input type="text" class="spinner" value="10"/>

and initialise the spinner like this:

$(".spinner").spinner();

and then try to disable keypress like this:

$(".spinner").unbind("keypress");

and it still allows keyboard input. Does anyone know away to do this? Heres a JSBin file that Ive been testing with: http://jsbin.com/ujajab/1/edit

Answer 1

Simple! Replace

$(".spinner").unbind("keypress");

with

$(".spinner").bind("keydown", function (event) {
    event.preventDefault();
});

Unbind will just unbind the functions that have been binded. A textfields default behavior wont be changed; so we have to prevent that! If you don't want it to focus at all:

$(".spinner").focus(function () {
    $(this).blur();
});

Happy coding!

Answer 2

One may want to avoid unbinding and prefer using the existing API's onchange callback:

jquery UI Spinner change event

Discard the change if out of your boundaries.

Answer 3

You can simply add readonly attribute to your label like this:

<input type="text" class="spinner" value="10" readonly/>

this works for me! Cheers