JS设置键盘快捷键、组合键

简介: JS设置键盘快捷键、组合键
/**设置快捷键(常用判断)----------------------------------------*/
onkeyup = e=> {
        var k = e.keyCode || e.which || e.charCode, ck = e.ctrlKey || e.metaKey, ak = e.altKey, sk = e.shiftKey;
        /**独立键*/
        if (k == 13) {/*按下回车键Enter↩的时候执行*/
        }
        if (k == 27) {/*按下退出键Esc的时候执行*/
        }
        if (k == 36) {/*执行Home*/
        }
        if (k == 35) {/*执行End*/
        }
        if (k == 48 || k == 96) {/*执行0、Num0*/
        }
        if (k == 49 || k == 97) {/*执行1、Num1*/
        }
        if (k == 37 || k == 38 || k == 27 || k == 8) { /*按下 ← ↑ Esc <BACKSAPCE 的时候执行*/
        }
        if (k == 33 || k == 37 || k == 38 || k == 100 || k == 104 || e.keyCode === 80) {/*执行Page Up、←、↑、Num4(←)、Num8(↑)、P*/
        }
        if (k == 34 || k == 39 || k == 40 || k == 102 || k == 98 || e.keyCode === 78) {/*执行Page Down、→、↓、Num2(→)、Num6(↓)、N*/
        }
        /**组合键*/
        if (ck && k == 13) {/*Ctrl+Enter*/
            alert('submit');
        }
        if (sk && k == 13) {/*Shift+Enter*/
            alert('change line');
        }
        if (ck && ak && sk && k == 83) {/*Ctrl+Alt+Shift+S*/
            alert('导出web图片');
        }
    }
/**设置快捷键(简单版本)----------------------------------------*/
onkeyup = e => {
  e.preventDefault();
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    /*按下Ctrl+S*/
    return false;
  }
  if (e.key === 'Meta'  && e.key === 's') {
    /*按下win+S*/
    return false;
  }
  if (e.altKey && e.key === 's') {
    /*按下Alt+S*/
    return false;
  }
  if (e.shiftKey && e.key === 's') {
    /*按下Shift+S*/
    return false;
  }
}

键码了解下

image.png


相关文章
|
28天前
|
JavaScript 算法 安全
深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
在数字化时代,共享文件的安全性至关重要。本文聚焦Node.js环境,介绍如何通过JavaScript对象字面量构建数据结构管理文件安全信息,包括使用`bcryptjs`库加密密码和权限校验算法,确保高效且安全的文件共享。通过实例代码展示加密与权限验证过程,帮助各行业实现严格的信息资产管理与协作。
|
5月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
2月前
|
JavaScript 前端开发
捕获键盘输入和输入组合键的js库hotkeys
捕获键盘输入和输入组合键的js库hotkeys
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
784 4
|
7月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
274 0
|
4月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
72 1
|
4月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
152 0
|
6月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
97 0
|
6月前
|
JavaScript 前端开发 Ubuntu
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
84 0
|
6月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57