jQuery-UI滑块 - 如何禁用键盘输入？

Question

in jQuery-UI Slider arrow keys move the slider handle (after the handle has been selected/clicked on), which is nice, but I don't want slider to handle keyboard (I use arrow keys on the page for another purpouse).

Any ideas how to disable keyboard events for jquery-ui slider?

Answer 1

You can unbind the keydown event from the handle to do what you want, like this:

$("#slider").slider(); //create slider
$("#slider .ui-slider-handle").unbind('keydown'); //disable keyboard actions

You can see a demo here

Answer 2

You can also automate the above solution like so:

$.prototype.slider_old = $.prototype.slider;
$.prototype.slider = function()
{
    var result = $.prototype.slider_old.apply(this, arguments);
    this.find(".ui-slider-handle").unbind("keydown"); // disable keyboard actions
    return result;
}

Just have this code run sometime before you make the "$(...).slider()" calls, and it should remove the keydown event for each one automatically, right after slider initialization.

Answer 3

I'd recommend using the slider's create callback to unbind keydown like so:

$( "#slider" ).slider({
  create: function() {
    disableKeydown();
  }
});

function disableKeydown() {
  $(".ui-slider-handle").unbind('keydown');
}

Depending on the context in which the first answer is executed, there's no guarantee that the unbind function will be called after a slider is initialized. The second answer helps to solve for this, but I think adhering to the API documentation provided by jquery UI makes this a more dev-friendly approach that results in less code ambiguity.