JS实现页面快捷键功能
JS实现页面快捷键功能一共分为三步:
- 第一步:绑定
onkeydown
事件; - 第二步:阻止默认按键功能;
- 第三步:验证键码,调用功能函数;
绑定事件
首先,实现页面快捷键我们需要用到 onkeydown
事件,onkeydown
事件会在用户按下键盘时触发。
我们将其绑定到 window
上:window.onkeydown
。
阻止默认功能
然后,通过event.preventDefault()
方法阻止掉按键原有的功能,为我们绑定上新的功能做好准备工作。
ps: 当然 event.preventDefault()
使不使用 ,怎么使用视情况而定。
验证键码
最后,根据键码判断验证后调用需要绑定的功能函数。
当然,在判断之前,首先我们得知道需要绑定快捷键的键码。
获取键码
获取键码,可以网上查表,但我认为没有让浏览器告诉我们来的方便。
绑定好onkeydown
事件和hotkey ()
函数,并打开控制台再点击一下页面后按下需要查看键码的按键,控制台就会输出对应的键码。
window.onkeydown = function () {