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


相关文章
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
184 4
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
203 0
|
1月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
47 1
|
1月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
27 0
|
3月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
64 0
|
3月前
|
JavaScript 前端开发 Ubuntu
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
58 0
|
3月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
4月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
486 2
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
57 1