使用 JavaScript 创建键盘快捷键
- 在 JavaScript 中使用纯 JavaScript 创建键盘快捷键
-
在 JavaScript 中使用
hotkeys.js库创建键盘快捷键 - 在 JavaScript 中使用 jQuery 库创建键盘快捷键
-
在 JavaScript 中使用
mousetrap.js库创建键盘快捷键
你想使用键盘快捷键为你的博客或网站增添趣味吗？本教程教你如何使用 JavaScript 创建键盘快捷键。
用户可以使用一个或多个属性，包括 shiftKey、altKey、ctrlKey、key 来获取按下的键的值。
我们可以使用下面列出的方法。
- 纯 JavaScript
- 使用
hotkeys.js库 - 使用 jQuery 库
- 使用
mousetrap.js库
让我们从纯 JavaScript 开始。
在 JavaScript 中使用纯 JavaScript 创建键盘快捷键
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Pure JS to Create Keyboard Shortcuts</title>
<script src="./script.js"></script>
</head>
<body>
<p>Press Alt+C</p>
</body>
</html>
JavaScript 代码：
document.addEventListener("keydown", function(e) {
if (e.altKey && e.code === "KeyC"){
alert('Alt + C is pressed!');
e.preventDefault();
}
});
这个例子使用 addEventListener() 来监听名为 keydown 的事件。为了实现 Alt+C 键盘事件快捷键，我们使用 KeyboardEvent.altKey 和 KeyboardEvent.code。
名为 KeyboardEvent.altKey 的只读属性是一个布尔结果，用于判断 Alt 是否被按下。它在按下键时返回 true，否则返回 false。
KeyboardEvent.code 显示键盘的物理键。
最后，如果检测到预期的按键，程序会使用 alert() 显示一条消息，并且 preventDefault() 函数会停止事件（它只能取消或停止可取消的事件）。我们也可以使用 KeyboardEvent.key 代替 KeyboardEvent.code；请参见以下示例。
JavaScript 代码：
document.addEventListener("keydown", function(e) {
if (e.altKey && (e.key === 'c' || e.key === 'C')){
alert('Alt + C is pressed!');
e.preventDefault();
}
});
在 JavaScript 中使用 hotkeys.js 库创建键盘快捷键
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Pure JS to Create Keyboard Shortcuts</title>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js">
</script>
<script src="./script.js"></script>
</head>
<body>
<p>Press Alt+C</p>
</body>
</html>
JavaScript 代码：
hotkeys('alt+c', function(event,handler) {
alert('Alt + c is pressed!');
event.preventDefault();
});
我们正在使用 hotkeys.js 库为 Alt+C 创建键盘快捷键。要使用它，你必须在你的机器上安装 Node.js 或通过 <script> 标签包含它。
我们还可以将它用于多个键盘快捷键，如下所示。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Pure JS to Create Keyboard Shortcuts</title>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js">
</script>
<script src="./script.js"></script>
</head>
<body>
<h1>You Can Press the Following Keyboard Shortcuts</h1>
<ul>
<li>Press Ctrl+A</li>
<li>Press Ctrl+B</li>
<li>Press A</li>
<li>Press B</li>
</ul>
</body>
</html>
JavaScript 代码：
hotkeys('ctrl+a,ctrl+b,a,b', function (event, handler){
switch (handler.key) {
case 'ctrl+a':
alert('You pressed Ctrl+A');
break;
case 'ctrl+b':
alert('You pressed Ctrl+B');
break;
case 'a':
alert('You pressed A!');
break;
case 'b':
alert('You pressed B!');
break;
default: alert(event);
}
});
在 JavaScript 中使用 jQuery 库创建键盘快捷键
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Pure JS to Create Keyboard Shortcuts</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="./script.js"></script>
</head>
<body>
<p>Press Alt+X</p>
</body>
</html>
JavaScript 代码：
$(document).keydown(function(e) {
if (e.altKey && e.which === 88){
alert('You pressed Alt + X');
e.preventDefault();
}
});
我们使用 jQuery 库的 keyboard() 函数，当键盘按键被按下时触发 keydown 事件。KeyboardEvent.which 具有数值并表示按下了哪个鼠标按钮或键盘键。
请记住，你可能必须从 event.which 或 event.keyCode 中选择任何一个，这取决于你的浏览器支持的内容。
在 JavaScript 中使用 mousetrap.js 库创建键盘快捷键
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Pure JS to Create Keyboard Shortcuts</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.3/mousetrap.min.js">
</script>
<script src="./script.js"></script>
</head>
<body>
<p>Press Alt+C</p>
</body>
</html>
JavaScript 代码：
Mousetrap.bind(['alt+c'], function(){
alert('You pressed Alt+C');
return false;
})
现在，我们使用 mousetrap.js 库来处理键盘快捷键。如果你有 Node.js，我们可以使用它，或者通过 <script> 元素手动添加它。
你可以这里详细了解。
