用 JS 和 jQuery 实现按键

Question

我想要在按键时显示一个警告框。完成了。但问题是我在页面内有一个文本框，当我尝试在文本框内输入时，警告框也会出现。

$(document).ready(function() {
    $(document).keydown(function(e) {
        if (e.key == "F8") {
            alert('Right key pressed');
        } else {
            alert("Error key pressed")
        }
        e.preventDefault();
    })
});

HTML:

<input type="text" />

Answer 1

文本框是您 document 的元素，因此引发 document 的事件是好的行为。

您应该将处理程序添加到文本框到 stop propagate 事件到 document 层

$('input').keydown(function (e) {
   e.stopPropagation();
}

Answer 2

尝试使用事件侦听器：

$(document).ready(function() {
var keyListner = function (e) {
    e.preventDefault();
    if (e.key == 'F8') {
        console.log('Right key pressed');
    } else {
        console.log('Error key pressed')
    };
}

//  Set the event listener
$(document).on('keyup', 'body', keyListner);

// Disable it on focus
$('input, textarea').focus(function() {
    $(document).off('keyup', 'body', keyListner);
});

// Enable it on blur
$('input, textarea').blur(function() {
    $(document).on('keyup', 'body', keyListner);
});
});

用 JS 和 jQuery 实现按键

Implementing key press with JS and jQuery

javascript

jquery

keypress