使用 keyup 和 keydown 触发 .change答案

【问题标题】：fire .change with keyup and keydown使用 keyup 和 keydown 触发 .change
【发布时间】：2011-06-03 13:41:10
【问题描述】：

只要我使用鼠标从选择框中选择一个选项，或者使用键盘箭头键选择选项，我就有以下工作，但是使用键盘时，更改事件不会触发，直到我按下回车在键盘上。

如何使用键盘箭头键检测更改而无需按 Enter？

$('#select_box').change(function() {
    some_function($(this).val());
});

【问题讨论】：

下面的答案不满意吗？？

标签： javascript jquery

【解决方案1】：

您可能希望避免不必要地多次调用您的函数，如果您不小心处理多个事件，就会发生这种情况。您可以通过在调用之前检查字段的值是否实际更改来避免这种情况。如下所示，一种方法是在字段上存储一个具有先前值的属性，然后在调用函数之前使用它来检查字段的值是否已更改：

var previousValuePropertyKey = 'previousValue';

$('#select_box').bind('keyup change', function(event) {
    var previousValue = $(this).prop(previousValuePropertyKey);
    var currentValue = $(this).val();
    $(this).prop(previousValuePropertyKey, currentValue );

    if(previousValue != currentValue ){
        alert(currentValue);//TODO remove alert
        //Yourfunction(..);
    }
});

Here 是一个例子。

【讨论】：

【解决方案2】：

试试

$('#select_box').bind('keyup change',function() {
    some_function($(this).val());
});

Reference

【讨论】：

Here 都是关键事件；你可以使用多个事件live
老实说，没必要住在这里——这太过分了。只需像其他示例一样在 keyup 上绑定即可。
@diEcho：除非需要，否则不要使用 live。使用 live 会更慢。即使你想实现实时功能，你也应该使用委托来提高性能。
@amustill;你是对的，但我总是喜欢使用live；这是最佳实践，也适用于未来元素
@diEcho：这绝对不是最佳实践。

【解决方案3】：

$('#select_box').change(function() {
    alert($(this).val());
});

$('#select_box').keyup(function() {
    alert($(this).val());
});

【讨论】：