Javascript 捕获按键

Question

我有一个包含许多字段的表单，当用户在任何字段中执行“双输入”时 doSomething() 应该发生。

下面的代码基本上工作正常，除了 doSomething() 被调用的次数与该字段中的字符一样多。它应该只被调用一次，而如果我在字段中输入“ABC”，doSomething() 会被调用 3X。只需在 2X Enter 后调用一次，无论字段中输入了什么。

我(有点)明白为什么会这样(keydown 被调用了 3 次)但不知道如何修复它。我需要解除绑定(bind)吗？当 e.keyCode 不是 13 时，将计数器重置为 0 似乎没有什么不同。

编辑 - http://jsfiddle.net/hzr8cezn/ - 我正在使用 2X 空格键字符进行测试，因为 Enter 试图在 jsfiddle 上提交表单。点击 2X 空格(在 Chrome 中)并检查你的控制台

$("#dynamicFields").on('keydown', 'input', function(e) {
        var counter = 0
        var field = $(this)
        field.keydown(function (e) {
            if(e.keyCode == 13) {
                counter++;
                if(counter == 2) {
                    console.log('twice!')
                    doSomething()
                } 
            }
            else {
                 counter = 0
            }
        })
    })

Answer 1

您两次附加到“keydown”事件，一次使用 on()，另一次使用 keydown()。您只需执行一次。

由于您正在跟踪每个元素的计数器，因此您可以使用 data()调用以在元素本身上对其进行跟踪。

// init counter to 0
$("#dynamicFields input").data('counter',0);

// bind to keypress event
$("#dynamicFields").on('keydown', 'input', function(e) {
    // the input field
    var $field = $(this);
    // enter key?
    if ( e.keyCode == 13 ){
        // how many times?
        var counter = $field.data('counter');
        // increment it
        $field.data('counter',++counter);
        // do the stuff
        if ( counter >= 2 ){
            alert('well, you did it.');
        }
    } else {
        // reset
        $field.data('counter',0);
    }
})

查看它在这个 jsFiddle 中的工作.