首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JS监听键盘事件

事件说明 我们将键盘事件的所有属性和方法打印出来(这里以1为例) document.onkeydown = function(event){ console.log(event)...; }  这里面有几个需要注意的属性 key:按键的名称 keyCode:按键的键码 altKey、ctrlKey、shiftKey:当组合(如ctrl+c)时,ctrlKey会变为...true 一、查看所有键 (获取event.key 的按键名称)(获取event.keyCode 的键码) document.onkeydown = function(event){...console.log(":"+event.key+"键:"+event.keyCode); } 下任意按键后的效果: 二、监听回车事件 这里以回车键(键码为13)为例 ,如果需要监听不同的按键...("下了回车键") } } 三、监听组合键 这里以CTRL+A为例 altKey:Alt+*组合键时为true ctrlKey:Ctrl+*组合键时为true shiftKey:

11.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【云端架构】前端js键盘绑定事件

    在Web开发中,有时候我们可能会把页面中的某些按钮绑定到键盘的输入事件中。以下代码能方便实现我们需要的功能。...js代码:         document.onkeyup = function (event...                default:                    break;             }         } 在Web开发中,有时候我们可能会把页面中的某些按钮绑定到键盘的输入事件中...以下为键盘的所有keyCode  : keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 ...0X11 S  0X83 SHIFT 0X10 T  0X84 ENTER 0XD 如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否下了

    4.4K100

    【错误记录】Java AWT 图形界面编程设置键盘事件没有响应 ( 设置键盘事件 | 键盘事件必须设置到 Frame JFrame 对象 )

    一、报错信息 ---- 实现一个需求 , 按键 数字 按键 , 让 Canvas 画布中绘制的图像根据的数值进行缩放 ; 在 AWT 自定义 Canvas 组件中 , 添加按键事件 , 下面定义的...Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ) ; 二、解决方案 ---- 鼠标事件 , 可以添加到具体的...Component 组件 , 但是凡是涉及到 键盘事件 , 必须添加到顶级组件 , 也就是窗口组件 , 如 : Frame / JFrame 组件 , 才能生效 ; 否则就会出现上述情况 ,...KeyAdapter / KeyListener 监听 , 根本不回调相应的回调函数 ; 将 KeyAdapter / KeyListener 监听器 设置到 JFrame 窗口上 , 此时在该应用中对应的按键...重新绘制画布 } } }); } 调用 JFrame#addKeyListener(new KeyAdapter(){}) 设置的键盘按键监听

    51820

    双击事件(dblclick)时,不触发鼠标(mousedown) 动作事件

    两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点触发多次。...在单击的时候(也就是鼠标的时候)不会执行双击,但是双击的时候会执行两次单击再执行双击事件。 解决的思路:要想双击时不执行单击事件,就使用定时器清除掉两个单击事件,留下一个双击事件。...item)"> handleMousedown(event, node, index) { clearTimeout(this.timeOut); // 清除第一个鼠标单击事件...(this.timeOut) console.log(event.target, 'handleDblclick'); }, 关于实现原理 在setTimeout 中的 time=200,大家知道js...的事件循环机制,点击事件会添加一个任务队列。

    68120

    Veritas:疫情企业“云”加速键

    文/ Veritas公司大中华区技术销售与服务总监 顾海巍 突如其来的疫情无意间下了企业“数字化转型”的加速键。...· 灵活性——对于许多企业组织来说,云的灵活性使这一IT架构成为他们的首选,在云计算结构,用户可在任何地点、任意设备上自由共享和访问数据。...· 可伸缩性——云的美妙之处还在于,只需轻轻一,便可为企业增加更多的存储空间及访问用户,反之亦然。...一是可用性,随着“云”进程的加快,企业IT在跨多云、物理、虚拟化环境的情况,对确保可用性、应用程序韧性和存储效率并最终实现业务连续提出了全新要求;二是业务韧性,伴随着勒索软件的崛起与在家办公的新常态...,不可预知事件概率加大,企业有必要将其存储与备份上升至全新高度;最后是合规层面,就国内而言,《数据安全管理办法》与《个人信息保护法》均在近期召开的两会上引起热议,政策在数据安全方面的不断加码,也迫使企业在

    78720

    【Android 事件分发】MotionEvent.ACTION_DOWN 事件分发流程( Activity | ViewGroup | View )

    Android 事件分发 系列文章目录 【Android 事件分发】事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) 【Android...】事件分发源码分析 ( ViewGroup 事件传递机制 一 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 二 ) 【Android 事件分发】事件分发源码分析...( ViewGroup 事件传递机制 三 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 ) 【Android 事件分发】事件分发源码分析...( ViewGroup 事件传递机制 五 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 六 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup...源码分析 ( OnItemTouchListener 事件监听器源码分析 二 ) 【Android 事件分发】MotionEvent.ACTION_DOWN 事件分发流程( Activity |

    1.7K20

    JS-事件之鼠标、键盘都能控制的下拉选框效果

    event.cancelBubble = true; };//以上是阻止冒泡的判断语句 menu.style.display = "block"; //添加键盘事件...)和addEventListener(通用浏览器中添加事件监听器)。...二、 展开菜单之后,在document对象绑定keyup事件,(键盘事件不是某个具体的对象了,所以要帮到document上面来)向下方向键,选中下一个选项,向上方向键,选中上一个选项,下回车键菜单收起...,显示选中项 提示: 1、 声明一个全局的index变量初值为-1 2、 向下方向键时index递增,当递增至大于等于菜单选项的总数时恢复为0 3、 向上方向键时判断index,如若小于等于0则设为菜单选项的总数...,下回车键不做任何操作 三、鼠标滑过每个选项时高亮显示,离开时去掉背景,点击高亮选项时菜单标题改变 提示: 1.遍历所有a标签,绑定鼠标点击的事件 注意:要考虑到浏览器兼容,使用innerHTML

    3.2K50

    JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

    当用户在手机上输入联系电话时,IPhone键盘会弹出,此时iphone为了让用户可以看到电话输入框,会将整个页面整体向上移动(不然键盘会遮住电话输入框)。...键盘收起时页面无法还原归位 然而当用户输入完成关闭键盘后,键盘虽然收起了,但页面位置却不会还原。 问题分析: 实际这是由于 iOS 无法在键盘收起时,页面滚出视口的部分没有掉下来导致的。...事件代理: 即,我们把事件监听放到顶部元素;然后定义一个 inputBlur 的函数等待触发。...而实际我们看 MDN 文档发现,这两个事件已经成为 DOM 3 规范的一个标准,而且可支持的浏览器数量并不少。...这样的话,在 blur 时会触发我们的 window.scrollTo(0,0) 导致页面往下滚一,接着 姓名输入框 聚焦,于是键盘继续弹起---这导致页面再次向上移动。

    3.4K10

    Js篇-面试题9-请说一Js中的事件循环机制

    JS 里的一种任务分类方式分为: 同步任务和异步任务 虽然 JS 是单线程的,但是浏览器的内核却是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步任务操作会将相关回调添加到任务队列中...而不同的异步操作添加到任务队列的时机也不同,比如onclick, setTimeout, ajax 处理的方式都不同 这些异步操作是由浏览器内核来执行的,浏览器内核包含 3 种 webAPI,分别是...DOM Binding(DOM绑定)、network(网络请求)、timer(定时器)模块 按照这种分类方式:JS 的执行机制是 首先判断 js 代码是同步还是异步,不停的检查调用栈中是否有任务需要执行...,如果没有,就检查任务队列,从中弹出一个任务,放入栈中,如此往复循环,要是同步就进入主进程,异步就进入事件表 异步任务在事件表中注册函数,当满足触发条件后,被推入事件队列 同步任务进入主线程后一直执行,...直到主线程空闲时,才会去事件队列中查看是否有可执行的异步任务,如果有就推入主进程中 以上三步循环执行,这就是事件循环(event loop),它是连接任务队列和控制调用栈的 ---- 在面试当中事件循环机制问得也比较多

    1.1K10
    领券