jQuery更改事件不会从键盘触发？答案

【问题标题】：jQuery change event not firing from keyboard?jQuery更改事件不会从键盘触发？
【发布时间】：2012-10-26 02:30:10
【问题描述】：

我有这个dropdown，我想在其中的值发生更改时提醒/记录一些东西。当我用鼠标单击dropdown 并选择任何其他值时，会发生更改事件。但是当焦点在dropdown 时，我按下up 和down 箭头，它会更改下拉列表中的值，但不会触发事件，并且现在会显示警报。这是代码

<select id="drpDay" name="drpDay" style="background-color: white;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7" selected="selected">7</option>    
    </select>
</br>
<select id="drpMonth" name="drpMonth" style="background-color: white;">
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="Mar">Mar</option>
        <option value="Apr">Apr</option>
        <option value="May">May</option>
        <option value="Jun">Jun</option>
        <option value="Jul">Jul</option>
        <option value="Aug">Aug</option>
        <option value="Sep">Sep</option>
        <option value="Oct">Oct</option>
        <option value="Nov" selected="selected">Nov</option>
        <option value="Dec">Dec</option>    
    </select>
</br>
<label id="lbl" text="" width="auto">adsf</label>

这个js是

$('#drpDay, #drpMonth').change(function(event) {
    alert(event.which);
    $('#lbl').text('change ' + event.which + ' and ' + $(event.target).attr('id'));
});

这是小提琴http://jsfiddle.net/2NBPx/4/

What I want is when the value in select box changes, event by pressing up and/or down arrow, I want that event to be fired.为什么不触发，如何在键盘更改时触发？

【问题讨论】：

你的意思是当列表向下时，你可以按上下键高亮你要选择的项目。如果是这样，那么此时值没有改变，只有当你用鼠标点击或按下回车选择一个项目时，值才会改变。

标签： events dom jquery-selectors jquery

【解决方案1】：

将其绑定到 keyup 并更改如下：http://jsfiddle.net/2NBPx/6/

$('#drpDate, #drpMonth').on('change keyup',function(event) {
    if($(this).data('last') !== $(this).val()){
        $(this).data('last', $(this).val());            
        $('#lbl').text('For change ' + event.which + ' and you ' + $(event.target).attr('id'));
    }
});

UPDATE：仅在发生实际更改时触发。

【讨论】：

【解决方案2】：

以下内容将确保只要选择更改，通过键盘或鼠标触发更改事件。

var prevValue = null;

$('#drpDay').change(function() {
    console.log('changed');
    prevValue = this.value;
});

$('#drpDay').keyup(function() {
    if(prevValue != this.value) {
        $(this).trigger('change');
    }
});

查看此演示：http://jsfiddle.net/ZCxe8/

【讨论】：

【解决方案3】：

你用的是什么浏览器？

在我的 Chrome 和 IE9 中，您提供的小提琴可以在键盘上正常使用。

【讨论】：

【解决方案4】：

您可以结合change 和keyup 事件。如果您的事件处理程序应该只在值实际发生变化时才执行他的工作，那么您将不得不在其中添加更多逻辑（记住旧值、比较、执行...）

$('#drpDay, #drpMonth').on("change keyup", function(event) {
    //...
});

【讨论】：

对于 jQuery 的 on 事件是空格分隔而不是逗号。 api.jquery.com/on
但是即使没有任何变化，这不会着火吗？即当用户在焦点位于<select>时按下 esc 或空格？