如何在空格键按下打开kendo下拉列表

时间:2015-11-25 08:16:18

标签: jquery kendo-ui kendo-dropdown

我在我的一个项目中使用了剑道下拉,我遇到了一个问题。在正常的html选择当我们在焦点上按空格键时它将显示选项。我需要在kendo下拉列表中实现相同我尝试过按键但是它不能正常工作我试过的代码如下所示

   $("#container").on("keypress", function (e) {
      if (e.keyCode === 0 || e.keyCode === 32) {
              alert("hi")
          }
    });

我知道它的垃圾,但我没有任何其他想法来实现该功能。是否可以在剑道下拉列表中实现此功能,如果它是我该怎么做

1 个答案:

答案 0 :(得分:2)

呈现剑道下拉列表后,会将select放入容器中。

<span title="" class="k-widget k-dropdown k-header" >
     <span unselectable="on" class="k-dropdown-wrap k-state-default">
          <span unselectable="on" class="k-input">Small</span>
          <span unselectable="on" class="k-select">
               <span unselectable="on" class="k-icon k-i-arrow-s">select</span>
          </span>
      </span>
      <select id="select" placeholder="Select size..." style="width: 100%; display: none;" accesskey="w" data-role="dropdownlist">
           <option value="X-Small">X-Small</option>
           <option value="Small" selected="selected">Small</option>
           <option value="Medium">Medium</option>
           <option value="Large">Large</option>
           <option value="X-Large">X-Large</option>
           <option value="2X-Large">2X-Large</option>
      </select>
</span>

keydown将在容器上触发: -

$("#select").kendoDropDownList();
$("#select").parent().on("keydown", function(e){
    if (e.keyCode === 0 || e.keyCode === 32) {
          $('select', this).data("kendoDropDownList").open();
    }
});

dojo