前端使用原生js实现全局快捷键功能

目录

前言

一、监听键盘事件

1.开启监听

2.处理键盘事件

 3.监听键盘组合键

二、销毁键盘监听事件

1.注意事项

2.销毁

总结

---

前言

有很多地方都需要快捷键的功能，比如在页面或者各种软件当中；当各种快捷键快捷键都不好使时就可以试试用原生js来实现快捷键的功能，实现思路主要就是使用document.onkeydown来监听键盘事件并作出对应的处理。

---

一、监听键盘事件

1.开启监听

        注意建议不要取消键盘的默认事件，不然会导致在开启监听的同时页面的其他地方用不了键盘，例如表单输入时，如果想要页面全局起作用则在最外层的组件就开启监听。

document.onkeydown = (e) => {}

2.处理键盘事件

        监听到键盘事件后，使用正则或者其他判断来对事件进一步处理

    document.onkeydown = (e) => {

      let isAlpNum = /[a-zA-Z]{1}/.test(e.key) ;//监听英文大小写字母，这里条件可以自己改

      if (isAlpNum) {

          //如果条件通过则处理自己想处理逻辑

      }

      if (e.key === "Enter") {

        可以通过监听enter来确定逻辑是否处理完毕

      }

    };

 3.监听键盘组合键

        通过组合键来可以实现快监听键盘实现快捷键功能或者设置快捷键，这里拿ctrl和shift来做示范，具体用什么组合键可以自己修改。

  document.onkeydown = (e) => {

      var keyCode = e.key;

      var ctrlKey = e.ctrlKey;

      var shiftKey = e.shiftKey;

        if (ctrlKey && shiftKey) {

                //这里可以处理同时按下ctrl和shift时的逻辑，加上其他按键可以实现快捷键功能

            switch (keyCode) {

                  case 'k':

                    console.log("快捷键k");

                  break;

                  default:

                  break;

        }

        }

}

二、销毁键盘监听事件

1.注意事项

        注意不要开启多个监听，在组件初始化时开启键盘监听，在组件销毁时销毁键盘监听，或者在每次开启监听前销毁上一个键盘监听事件。

2.销毁

document.onkeydown = null;

总结

        可以利用监听键盘事件实现快捷键，总体思路

        设置快捷键：利用监听组合键，得到快捷键，然后做持久化存储，可以使用store或者localStorage或者直接保存到服务器。

        监听快捷键：从本地拿到快捷键，然后做处理。

这篇好文章是转载于：学新通技术网