vue禁用键盘上某个按键

这篇具有很好参考价值的文章主要介绍了vue禁用键盘上某个按键。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 mounted(){

     this.showkey()

  },

  created: function() {

    document.onkeydown = function() {

        let key = window.event.keyCode;

        if(key == 122) return false                          //禁用f11按键

    };

},

keyCode                                                    实际键值

48到57                                                           0到9

65到90                                                         a到z(A到Z)

112到135                                                        F1到F24

8                                                               BackSpace(退格)

9                                                                          Tab

13                                                                   Enter(回车)

20                                                              Caps_Lock(大写锁定)

32                                                                      Space(空格键)

37                                                                        Left(左箭头)

38                                                                         Up(上箭头)

39                                                                         Right(右箭头)

40                                                                         Down(下箭头)

45                                                                             Insert(插入)

46                                                                             Delete(删除)

27                                                                                     ESC

在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。

别名 实际键值

.delete                                                             delete(删除)/BackSpace(退格)

.tab                                                                                             Tab

.enter                                                                                 Enter(回车)

.esc                                                                                    Esc(退出)

.space                                                                             Space(空格键)

.left                                                                                 Left(左箭头)

.up                                                                                 Up(上箭头)

.right                                                                                 Right(右箭头)

.down                                                                         Down(下箭头)

.ctrl                                                                                         Ctrl

.alt                                                                                         Alt

.shift                                                                                         Shift

.meta                                                     (window系统下是window键,mac下是command键)

另外,Vue中还支持组合写法:

组合写法按键组合

@keyup.alt.67=”function”Alt + C

@click.ctrl=”function”Ctrl + Click

created: function() {

    var _this = this;

    document.onkeydown = function(e) {

        let key = window.event.keyCode;

        if(key == 119){

          console.log('监听F8按键')

        }else if(key == 120){

          console.log('监听F9按键')

        }else if(key == 121){

          console.log('监听F10按键')

        }};}

禁用键盘事件

//在methods中

showkey() {

    document.onkeydown = function() {

        console.log(window.event.returnValue);

        if (window.event.keyCode == 116) {

            window.event.returnValue = false;

        }

        console.log(window.event.returnValue);

    };},

//mounted中调用

mounted () {

    this.showkey()

}文章来源地址https://www.toymoban.com/news/detail-853966.html

到了这里,关于vue禁用键盘上某个按键的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++ 模拟按下键盘的某个按键

    以下是一段使用C++的Windows API模拟按下向下箭头键的代码: 需要注意的是,这段代码只在Windows平台上有效,且需要包含Windows.h头文件。 keybd_event是Windows API中的一个函数,用于模拟键盘按键事件。它有四个参数: 第一个参数指定要模拟的键码,例如VK_DOWN表示向下箭头键。 第

    2024年02月08日
    浏览(42)
  • js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件

    第一:获取键盘按键事件 第二:判断键盘按键事件 第三:调用键盘按键事件

    2024年02月11日
    浏览(51)
  • vue的el-table多选对某个选项进行禁用

    文档相关链接 el-table多选官方文档 用法

    2024年02月04日
    浏览(47)
  • 【js】鼠标禁止右键禁止打开控制台及键盘禁用

    大家好,今天和大家分享一下在前端js中禁止鼠标在浏览器中右键,禁止鼠标选中和禁止键盘按键。 这个方法是我在制作一个单词考核系统时所使用到的,因为在考试期间如果打开控制台,通过控制台找到了正确的答案,那么就没有意义了。 所以就需要将控制台禁用,所应用

    2024年02月10日
    浏览(59)
  • 【开源】JAVA+Vue.js实现大学计算机课程管理平台

    大学计算机课程管理平台包含实验课程模块、实验资源模块、学生实验模块,前端采用Vue.js,采用View UI组件库美化界面,后端采用SpringBoot框架。在操作系统、开发语言、服务器,数据库、连接技术方面,对应使用Window操作系统、Java语言、Tomcat服务器、MySql数据库以及MyBatis技

    2024年02月20日
    浏览(42)
  • Vue页面监听 键盘按键

    1、监听方法 2、在mounted 钩子函数中调用 3、组合建 键盘keyCode:https://www.toptal.com/developers/keycode/for/arrow-left

    2024年02月15日
    浏览(37)
  • 域策略(7)——禁用本地administrator登录计算机

    通常公司域环境中,普通域用户没有管理员权限,不可以随意设置系统和私自安装软件,但是对于有些自己装机经验的人员来说,会通过PE等工具来解锁和重置administrator本地账户,从而用本地账户进入系统,进行配置、安装软件等违规行为。因此可以通过策略禁用本地admini

    2024年02月13日
    浏览(47)
  • vue禁用后退前进功能(键盘回退、鼠标回退键)

    引出 采用CefSharp.ChromiumWebBrowser开发项目当中,当鼠标点击侧边键时,会直接退出到登录页面,后续无法进行操作,要求禁用鼠标的回退键,防止以上事情发生。 采用popstate事件实现禁用页面回退功能 每当激活同一文档中不同的历史记录条目时,popstate 事件就会在对应的 win

    2024年02月05日
    浏览(40)
  • Vue键盘按键别名/事件说明及案例

    Vue中的按键别名(): 回车 = enter 删除 = delete (退格 、 删除 按键) 退出 = esc 空格 = space 换行 = tab (必须配合 keydown 去使用) 上 = up 下 = down 左 = left 右 = right 如果没有内置别名可以 组合: 组合类 = shift + tab 监听事件: keydown :当用户按下任意键时触发。 keyup :当用户释

    2024年01月18日
    浏览(41)
  • Vue页面监听键盘按键的多种方法

    在Vue页面中,可以使用多种方法来监听键盘按键。以下是至少五种常用的方法: 使用 @keydown 或 @keyup 指令来绑定键盘按键事件。 使用 v-on 指令来绑定键盘按键事件。 使用 window.addEventListener 来全局监听键盘按键事件。 使用 vue-shortkey 插件来监听键盘按键。 使用 keydown 事件监

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包