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

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).

在jQuery-UI Slider箭头键移动滑块手柄(在选择/单击手柄后),这很好,但我不希望滑块处理键盘(我在页面上使用箭头键为另一个purpouse)。

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

任何想法如何禁用jquery-ui滑块的键盘事件?

3 个解决方案

#1

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

您可以从句柄中取消绑定keydown事件以执行您想要的操作,如下所示:

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

You can see a demo here

你可以在这里看到一个演示

#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.

只需在执行“$(...)。slider()”调用之前的某个时间运行此代码,它应该在滑块初始化之后立即自动删除每个代码的keydown事件。

#3

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

我建议使用滑块的创建回调来取消绑定keydown,如下所示:

$( "#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.

根据执行第一个答案的上下文,无法保证在初始化滑块后调用unbind函数。第二个答案有助于解决这个问题,但我认为遵守jquery UI提供的API文档使得这种方法更加开发,可以减少代码歧义。

#1