Question

有没有办法在Kendo UI Slider上禁用键盘事件？基本上，我想防止在按下左右箭头键时更改滑块的值。这有可能吗？

请注意，滑块是作为KO自定义绑定处理程序的一部分动态插入DOM的。

＆＃13;

ko.bindingHandlers.tone = {

  init: function(element, valueAccessor) {

    if (valueAccessor().settingToneEnabled) {

      var $el = $(element);
      var tag = '<span class="dropdown mrgn-tp-md"><a href="" class="dropdown-toggle" type="button" data-tone id="tonedropdownMenu" data-toggle="dropdown" aria-expanded="true"></a><ul class="dropdown-menu dropdown-menu-right text-center pddng-sm" aria-labelledby="tonedropdownMenu"><li class="pddng-lft-md pddng-rght-sm"><span id="tone-slider" title="tone"></span></li><li class="pddng-rght-sm"><a href="" class="pddng-lft-0 ps-link dark-grey no-decor del font-85" style="padding-left: 14px;"><i class="icon icon-delete"></i> ' + i18n['ps-deleteArticleToneLabel'] + '</a></li></ul></span>';

      $(tag).appendTo($el);

      var $slider = $('#tone-slider', $el);
      var $delLink = $('a.del', $el);
      var $dropdown = $('span.dropdown', $el);

      $('a.dropdown-toggle', $dropdown).on('click', function() {
        $('.dropdown-menu', $dropdown).toggle();
      });

      $slider.kendoSlider({
        change: function(e) {
          var va = valueAccessor();
          va.value(e.value);
          if ($.isFunction(va.handleUserInput)) {
            va.handleUserInput();
          }
        },
        showButtons: false,
        min: -1,
        max: 1,
        smallStep: 1,
        value: valueAccessor().value() || 0,
        tickPlacement: 'none',
        tooltip: {
          enabled: false
        }
      });


      $('.k-draghandle', $el).off('keydown');


      $delLink.on('click', function(e) {

        e.preventDefault();
        if ($delLink.attr('disabled')) {
          return;
        }

        var va = valueAccessor();
        va.value(null);
        if ($.isFunction(va.handleUserInput)) {
          va.handleUserInput();
        }

      });

      $el.data('slider', $slider.data("kendoSlider"));
      $el.data('deleteButton', $delLink);
      $el.data('dropdown', $dropdown);
    } else {
      $('<span href="" data-tone></span>').appendTo(element);
    }
  },

  update: function(element, valueAccessor) {

    var toneValues = {
      '1': {
        name: i18n['ps-tonePositive'],
        val: 1,
        css: 'icon-tone-positive'
      },

      '0': {
        name: i18n['ps-toneNeutral'],
        val: 0,
        css: 'icon-tone-neutral'
      },

      '-1': {
        name: i18n['ps-toneNegative'],
        val: 0,
        css: 'icon-tone-negative'
      },

    };

    var $tone = $('*[data-tone]', element);
    var val = valueAccessor().value() || 0;
    var tone = toneValues[val.toString()] || toneValues['0'];

    $tone.removeClass()
      .addClass('icon').addClass(tone.css)
      .attr('title', tone.name);

    if (valueAccessor().settingToneEnabled) {
      $('#tone-slider', element).data("kendoSlider").value(val);
    }
  },

};

＆＃13;

Answer 1

您可以尝试删除keydown处理程序。请参阅demo。

Kendo UI Slider /如何禁用键盘输入？

1 个答案: