jQuery选择将事件绑定到键盘

时间:2015-10-29 23:18:57

标签: javascript jquery jquery-chosen

以下是我的HTML结构:

<select class="chosen-select" data-placeholder="Choose an color:">
    <option value="1">red</option>
    <option value="2">blue</option>
    <option value="3">green</option>
    <option value="4">black</option>
</select>

这里是javascript部分,在这里它显示了绑定点击事件是多么容易:

    $(document).on('click', '.active-result', function () {
        var color = $(this).text()
    })
    // do something with color

我已经尝试绑定到键上/下和按键成功。但是: 这是我的用例: 我需要将事件绑定到ENTER键,我已尝试将事件绑定到e.which == 13并阻止默认值但没有成功。另外我还要提一下,这段代码应用于bootstrap Modal。

3 个答案:

答案 0 :(得分:1)

尝试附加jQuery的keydown事件:

$(document).on('keydown', '.chosen-select', function (event) {
    if ( event.which == 13 ) {      
        event.preventDefault();
        var color = $(this).text();

        // do something with color
    }    
})

答案 1 :(得分:1)

这样可以获得颜色并更改按键上下拉列表的值 - 输入。

$(document).on('keydown', '.chosen-select', function (e) {
    if (e.which == 13 )
    {  
       var selectedTarget = $(this).find("option:selected");
        alert($(selectedTarget).text());
        $(this).val($(selectedTarget).val());       
    }    
});

http://jsfiddle.net/ghjhjz03/4/

答案 2 :(得分:0)

我能够通过将事件绑定到selected()来解决问题:

$(".chosen-select").chosen().keydown ( function (e) {
    if (e.which == 13 )
    {
        var color = $(this).val()
    }
});