Jquery UI Spinner - Disable Keyboard Input

问题

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

回答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!

回答2:

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

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

this works for me! Cheers

回答3:

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.

来源：https://stackoverflow.com/questions/17922215/jquery-ui-spinner-disable-keyboard-input