MyPrint打印设计器（一）js 键盘监听 组合键/快捷键

已于 2024-10-01 22:45:54 修改
阅读量932 收藏 30
点赞数 8
分类专栏： Myprint 可视化打印设计器 文章标签： javascript vue.js html 打印设计 MyPrint
于 2024-08-23 20:41:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37614259/article/details/141198777
版权

今天分享如何快速实现js快捷键监听

所需环境：

  • 浏览器
  • js

实现目标

  • mac/win兼容，一套代码，多个平台
  • 支持快捷键监听/单按键监听
  • 事件是否冒泡可设置
  • 使用方式简单
  • 快速挂载与卸载
  • 4行代码实现组合键监听

代码原理

把键盘监听事件挂载在document上，当键盘事件发生时，依次匹配事先订阅的快捷键/单按键事件，
如果有匹配到对应的订阅，则进行事件回调，并且停止键盘事件的回调。按下的按键进行转换，把mac/win的键盘差异进行了兼容

实战项目：MyPrint

操作简单，组件丰富的一站式打印解决方案打印设计器

体验地址：前往

代码仓库：github

代码仓库：gitee

实现效果

在这里插入图片描述

js快捷键实战

核心代码

interface keyListener {
    keys: Array<string | ((event: KeyboardEvent) => boolean)>;
    // ALL 全部符合才算| ANY 匹配到任意一个就算
    matchType: 'ALL' | 'ANY';
    callback: (keyStr: string) => void;
    // 是否停止时间传播
    stop: boolean;
}

// 多平台键盘转换
const keyConvert = {
    Ctrl: ['Meta', 'Ctrl']
} as Record<string, Array<string>>;

const eventListeners: Array<keyListener> = [];
const downKeyList = {} as any;

export function addKeyboardEvent() {
    document.addEventListener('keydown', keyDown);
    document.addEventListener('keyup', keyUp);

    const handlers = {
        subscribe(keys: Array<string | ((event: KeyboardEvent) => boolean)>, callback: (keyStr: string) => void, stop = true) {
            eventListeners.push({
                keys,
                matchType: 'ALL',
                callback,
                stop
            });
            return handlers;
        },
        subscribeAny(keys: Array<string | ((event: KeyboardEvent) => boolean)>, callback: (keyStr: string) => void, stop = true) {
            eventListeners.push({
                keys,
                matchType: 'ANY',
                callback,
                stop
            });
            return handlers;
        }
    };
    return handlers;
}

export function removeKeyboardEvent() {
    document.removeEventListener('keydown', keyDown);
    document.removeEventListener('keyup', keyUp);
}

function keyUp(event: KeyboardEvent) {
    delete downKeyList[convertKey(event.key)];
}

function convertKey(key: string) {
    for (let keyConvertKey in keyConvert) {
        let convertList = keyConvert[keyConvertKey];
        if (convertList.includes(key)) {
            return keyConvertKey;
        }
    }
    return key;
}

function keyDown(event: KeyboardEvent) {
    // 如果需要输入框，则不监听组合键
    if ((event.target as HTMLElement).tagName === 'INPUT' || (event.target as HTMLElement).tagName === 'TEXTAREA') {
        // console.log('This event is triggered by an input or textarea!');
        return;
    }

    for (let eventListener of eventListeners) {
        let matchResult = false
        if (eventListener.matchType == 'ALL') {
            matchResult = matchAll(event, eventListener)
        } else {
            matchResult = matchAny(event, eventListener)
        }
        if (matchResult) {
            break
        }
    }
}

function matchAll(event: KeyboardEvent, keyListener: keyListener) {
    const {keys, callback, stop} = keyListener;
    let isTrigger = true;
    let keyStr = ''
    for (let key of keys) {
        if (key instanceof Function) {
            keyStr = keyStr + key.name + "+"
            if (!key(event)) {
                isTrigger = false;
                break;
            }
        } else {
            keyStr = keyStr + event.key + "+"

            if (key != event.key) {
                isTrigger = false;
                break;
            }
        }
    }
    if (isTrigger) {
        keyStr = keyStr.slice(0, -1);
        callback(keyStr);
        if (stop) {
            event.preventDefault();
            event.stopPropagation();
        }
        return true;
    }
    return false
}

function matchAny(event: KeyboardEvent, keyListener: keyListener) {
    const {keys, callback, stop} = keyListener;
    let isTrigger = false;
    let keyStr = ''
    for (let key of keys) {
        if (key instanceof Function) {
            if (key(event)) {
                keyStr = keyStr + key.name + "+"
                isTrigger = true;
            }
        } else {
            if (key == event.key) {
                keyStr = keyStr + event.key + "+"
                isTrigger = true;
            }
        }

        if (isTrigger) {
            keyStr = keyStr.slice(0, -1);
            callback(keyStr);
            if (stop) {
                event.preventDefault();
                event.stopPropagation();
            }
            return true
        }
    }
    return false
}

// 兼容macos & win
export function isCtrl(event: KeyboardEvent) {
    return event.ctrlKey || event.metaKey;
}

export function isShift(event: KeyboardEvent) {
    return event.shiftKey;
}

export function isCtrlShift(event: KeyboardEvent) {
    return (event.ctrlKey || event.metaKey) && event.shiftKey;
}

export function isDelete(event: KeyboardEvent) {
    return event.key == 'Backspace';
}

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyPrint-快捷键示例</title>
    <style>
        :root {
            font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
            line-height: 1.5;
            font-weight: 400;
            
            color-scheme: light dark;
            color: rgba(255, 255, 255, 0.87);
            background-color: #242424;
            
            font-synthesis: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        body {
            display: flex;
            height: 100vh;
            place-items: center;
            width: 100%;
            min-height: 100vh;
            margin: 0 auto;
            text-align: center;
        }
        
        #keyboardShortcutsStr {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="keyboardShortcutsStr"></div>
<script>
    function setKeyboardShortcutsStr(keyboardShortcutsStr) {
        document.querySelector("#keyboardShortcutsStr").innerHTML = keyboardShortcutsStr
    }
    
    var keyConvert = {
        Ctrl: ['Meta', 'Ctrl']
    };
    var eventListeners = [];
    var downKeyList = {};
    
    function addKeyboardEvent() {
        document.addEventListener('keydown', keyDown);
        document.addEventListener('keyup', keyUp);
        var handlers = {
            subscribe: function (keys, callback, stop) {
                if (stop === void 0) {
                    stop = true;
                }
                eventListeners.push({
                    keys: keys,
                    matchType: 'ALL',
                    callback: callback,
                    stop: stop
                });
                return handlers;
            },
            subscribeAny: function (keys, callback, stop) {
                if (stop === void 0) {
                    stop = true;
                }
                eventListeners.push({
                    keys: keys,
                    matchType: 'ANY',
                    callback: callback,
                    stop: stop
                });
                return handlers;
            }
        };
        return handlers;
    }
    
    function removeKeyboardEvent() {
        document.removeEventListener('keydown', keyDown);
        document.removeEventListener('keyup', keyUp);
    }
    
    function keyUp(event) {
        delete downKeyList[convertKey(event.key)];
    }
    
    function convertKey(key) {
        for (var keyConvertKey in keyConvert) {
            var convertList = keyConvert[keyConvertKey];
            if (convertList.includes(key)) {
                return keyConvertKey;
            }
        }
        return key;
    }
    
    function keyDown(event) {
        // 如果需要输入框，则不监听组合键
        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
            // console.log('This event is triggered by an input or textarea!');
            return;
        }
        for (var _i = 0, eventListeners_1 = eventListeners; _i < eventListeners_1.length; _i++) {
            var eventListener = eventListeners_1[_i];
            var matchResult = false;
            if (eventListener.matchType == 'ALL') {
                matchResult = matchAll(event, eventListener);
            } else {
                matchResult = matchAny(event, eventListener);
            }
            if (matchResult) {
                break;
            }
        }
    }
    
    function matchAll(event, keyListener) {
        var keys = keyListener.keys, callback = keyListener.callback, stop = keyListener.stop;
        var isTrigger = true;
        var keyStr = '';
        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
            var key = keys_1[_i];
            if (key instanceof Function) {
                keyStr = keyStr + key.name + "+";
                if (!key(event)) {
                    isTrigger = false;
                    break;
                }
            } else {
                keyStr = keyStr + event.key + "+";
                if (key != event.key) {
                    isTrigger = false;
                    break;
                }
            }
        }
        if (isTrigger) {
            keyStr = keyStr.slice(0, -1);
            callback(keyStr);
            if (stop) {
                event.preventDefault();
                event.stopPropagation();
            }
            return true;
        }
        return false;
    }
    
    function matchAny(event, keyListener) {
        var keys = keyListener.keys, callback = keyListener.callback, stop = keyListener.stop;
        var isTrigger = false;
        var keyStr = '';
        for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
            var key = keys_2[_i];
            if (key instanceof Function) {
                if (key(event)) {
                    keyStr = keyStr + key.name + "+";
                    isTrigger = true;
                }
            } else {
                if (key == event.key) {
                    keyStr = keyStr + event.key + "+";
                    isTrigger = true;
                }
            }
            if (isTrigger) {
                keyStr = keyStr.slice(0, -1);
                callback(keyStr);
                if (stop) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                return true;
            }
        }
        return false;
    }
    
    // 兼容macos & win
    function isCtrl(event) {
        return event.ctrlKey || event.metaKey;
    }
    
    function isShift(event) {
        return event.shiftKey;
    }
    
    function isCtrlShift(event) {
        return (event.ctrlKey || event.metaKey) && event.shiftKey;
    }
    
    function isDelete(event) {
        return event.key == 'Backspace';
    }
    
    
    addKeyboardEvent()
            // macos
            .subscribe([isCtrlShift, 'z'], (_keyStr) => {
                setKeyboardShortcutsStr('Ctrl+Shift+z 重做')
            })
            // win
            .subscribe([isCtrlShift, 'y'], () => {
                setKeyboardShortcutsStr('Ctrl+y')
            })
            .subscribe([isCtrl, 'z'], () => {
                setKeyboardShortcutsStr('Ctrl+z 撤销')
            })
            .subscribe([isCtrl, 'a'], () => {
                setKeyboardShortcutsStr('Ctrl+a 全选')
            })
            .subscribe([isCtrl, 'c'], () => {
                setKeyboardShortcutsStr('Ctrl+c 复制')
            })
            .subscribe([isCtrl, 'x'], () => {
                setKeyboardShortcutsStr('Ctrl+c 剪切')
            })
            .subscribe([isCtrl, 'v'], () => {
                setKeyboardShortcutsStr('Ctrl+v 粘贴')
            })
            .subscribe([isCtrl, 'd'], () => {
                setKeyboardShortcutsStr('Ctrl+d 副本')
            })
            .subscribe([isCtrl, 's'], () => {
                setKeyboardShortcutsStr('Ctrl+s 保存')
            })
            .subscribe([isCtrl, 'f'], () => {
                setKeyboardShortcutsStr('Ctrl+f 搜索')
            })
            .subscribe(['Tab'], () => {
                setKeyboardShortcutsStr('Tab切换')
            })
            
            .subscribe([isCtrlShift, 'ArrowUp'], () => {
                // console.log('ArrowUp')
            })
            .subscribe([isCtrlShift, 'ArrowDown'], () => {
                // console.log('ArrowDown')
            })
            .subscribe([isCtrlShift, 'ArrowLeft'], () => {
                // console.log('ArrowLeft')
            })
            .subscribe([isCtrlShift, 'ArrowRight'], () => {
                // console.log('ArrowRight')
            })
            
            .subscribe([isShift, 'ArrowUp'], () => {
                // console.log('ArrowUp')
            })
            .subscribe([isShift, 'ArrowDown'], () => {
            })
            .subscribe([isShift, 'ArrowLeft'], () => {
            })
            .subscribe([isShift, 'ArrowRight'], () => {
            })
            
            .subscribe([isCtrl, 'ArrowUp'], () => {
            })
            .subscribe([isCtrl, 'ArrowDown'], () => {
            })
            .subscribe([isCtrl, 'ArrowLeft'], () => {
            })
            .subscribe([isCtrl, 'ArrowRight'], () => {
            })
            
            .subscribe(['ArrowUp'], () => {
            })
            .subscribe(['ArrowDown'], () => {
            })
            .subscribe(['ArrowLeft'], () => {
            })
            .subscribe(['ArrowRight'], () => {
            })
            
            .subscribe([isDelete], () => {
                // console.log('ArrowRight')
            })
            .subscribeAny(['q', 'w', 'e', 'r', 't', 'a', 'b', 'c', 'd'], (keyStr) => {
                // console.log('ArrowRight')
                setKeyboardShortcutsStr(keyStr)
            }, false);
</script>
</body>
</html>

代码仓库

在线体验

代码仓库：github

代码仓库：gitee

那叫一个优雅
关注
专栏目录
JS监听键盘组合事件
柒月
01-21 2794
起因 今天看到一个需求，要是使用Alt+A快捷键实现某个功能。 可以监听键盘的事件 keydown keyup keypress都可以监听键盘事件。 他们之间的区别在于： keypress只能捕捉单个字符 keypress 可以捕获单个字符的大小写 keypress 不区分小键盘和主键盘的数字字符 keypress 不能监听alt、ctrl、enter、shift这些 keydown keyup 可以捕获组合键 keydown keyup 不能区分字母的大小写 keydown keyup 区分小键盘和主键
js print打印网页指定区域内容的简单实例
10-21
本文将详细介绍如何使用JavaScript来打印网页指定区域的内容，并提供一个简单的实例。 首先，我们要了解JavaScript的`window.print()`方法。这个方法用于打开浏览器的打印对话框，允许用户选择打印当前窗口的内容。...
js监听键盘方向键事件
beckham
03-10 5689
一般在分页的时候需要使用方向键翻页，js可以增加监听事件来完成。 document.onkeydown = chang_page; function chang_page() { if (event.keyCode == 37 || event.keyCode == 33) location = http://www.maitianquan.com;
MyPrint打印设计器（三）设置整个条码宽度,让条形码填充整个div
css
08-27 612
让条形码填充整个div。
MyPrint打印设计器（七）svg篇-二阶贝塞尔曲线
css
09-04 1078
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的二次贝塞尔曲线首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 在这个HTML结构中，元素用于承载我们即将绘制的二次贝塞尔曲线和相关的辅助线。id=“chartRef” 使我们能够在JavaScript中轻松获取到这个元素。接下来，我们定义二次贝塞尔曲线的起点、终点和控制点，并绘制曲线。 在 freshSvg 函数中，首先定义了起点 (x0, y0)、
MyPrint打印设计器（五）vueuse/core 助你一臂之力
css
09-03 450
VueUse 是一个基于 Vue 3 的实用工具库，专门为 Vue 3 应用程序提供一系列经过优化和高度可组合的工具函数。 VueUse 提供了许多实用的组合式 API， 帮助开发者更轻松地管理状态、处理副作用、与 DOM 交互、处理时间和日期等常见任务。本文将介绍一些常用示例，以及一些有趣的功能
打印设计器-MyPrint
css
09-05 1594
操作简单，组件丰富的一站式打印解决方案打印设计器
JavaScript打印网页指定区域的例子
10-26
在网页设计和内容展示中，经常会遇到需要打印特定内容的需求，例如打印一张发票、一个表格或某个页面上的特定部分。传统的网页打印方法通常会打印整个页面的内容，但有时候只需要打印页面的一部分，这就需要借助...
主函数中定义一个数组。数组元素从键盘输入，定义一个myprint 的函数。调用该函数可以输出数组全部元素。
06-06
然后我们定义了一个名为myprint的函数，它接受一个int类型的数组和数组大小size作为参数，函数内部遍历整个数组并输出每个元素。最后在主函数中调用myprint函数，传入数组arr和数组大小size即可输出数组全部元素。 ...
C，可变参数，myprint
痛苦的时候装出幸福相，这不是那么难做到的事
05-11 433
越是骗子越得多说实话，否则怎么骗取信任呢？满口谎言的是小孩、是笨蛋——《拔魔》
JS 监听键盘左右箭头按键 并解决会重复触发问题
朝花夕拾的博客
04-19 779
【代码】JS 监听键盘左右箭头按键。
可变参数my_print 的实现
weixin_33797791的博客
08-28 200
#include <stdio.h> #include <string.h> #include <stdarg.h> void Int2Hex_Inchar(int num,char *Hexstr){int i=9;int j=0;int yushu;char a[10] = {'0','x','0','0','0',...
继续扩展myprint的功能为操作系统开发加油！
weixin_39410618的博客
04-24 262
这段代码虽然不免抄袭大侠们的嫌疑，但是完全是自己重新写过的，没有知识产权的纠纷了，而且更容易看懂，今天真是收获不小。 #include <stdio.h> char str[0xff]; void str_cpy(const char* s, char* d) { while(*s) *d++ = *s++; *d = '\0'; return; } int ...
Python3 函数
m0_59236127的博客
11-11 225
函数是组织好的，可重复使用的，用来实现单一，或相关联功能的代码段。
C语言—函数
qq_30569341的博客
12-20 530
因为程序的编译是从上到下执行的，先编译Main的时候，还没有定义函数MyPrint，所以在编译过程中就会找不到这个函数；想对实参进行修改，就要传递地址，这里需要使用指针，调用者将它实参的地址传递给被调用者的形参，那么被调用者在使用形参的时候，是对实参的地址中的内容进行修改；当数组作为函数的参数时，是传递的数组的首地址；函数：将代码块封装成一个个不同的函数，在使用时可以多次的调用，不需要关心内部的实现；实参和形参：调用函数时给的参数时实参，调用的函数在执行时的使用参数是形参；一个函数，在程序中可以随意调用；
JS监听键盘事件
weixin_44673546的博客
07-18 1220
【代码】JS监听键盘事件。
MyPrint打印设计器（十）svg篇-多边形
最新发布
css
09-05 626
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的多边形首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 绘制 SVG 矩形 接下来，我们使用 D3.js 创建一个简单的矩形，并通过 JavaScript 函数 freshSvg 进行渲染。代码如下： 这里，我们定义了矩形的四个顶点，并通过 d3.path() 方法绘制了这个矩形。为了让用户可以拖动矩形的顶点，我们使用 D3.js 的 drag 功能，
JavaScript监听键盘事件，组合键事件
热门推荐
projectNo的博客
09-04 2万+
监听键盘事件，比如说提交表单或者确认通过键盘操作会很方便，有时候需要组合键比如复制粘贴等。基本原理是当按下某一个键时，返回对应的值，然后再判断用户按下了哪个键，进行对比。一、键盘监听是直接在整个页面文档上进行监听的，也就是document上，以下是原生的使用案例：1、某个键按下事件：onkeydown 2、某个键被按下或者按住：onkeypress 3、某个按下的键被松开：onkeyupdocu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值