首页
学习
活动
专区
工具
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)为例 ,如果需要监听不同按键...V 86 4 52 W 87 5 53 X 88 6 54 Y 89 7 55 Z 90 8 56 0 48 9 57 数字键盘键码值 按键 键码 按键 键码 0 96 8 104 1

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

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

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

    67620

    Electron中键盘鼠标操作(Windows环境)

    版本不要用最新版本 用v10.16.3即可 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 或者更新npm包镜像源...`_robotjs@0.5.1@robotjs`文件夹 如果没有生成/build/Release/robotjs.node 就执行下面的操作 下载依赖 cnpm install 编译 node-gyp...rebuild --python C:\Users\Jian\.windows-build-tools\python27\python.exe 构建robotjs.nodeNode版本如果和Electron...中Node版本不一样的话就需要执行下面的rebuild操作 查看系统Node版本 node -v 获取Electron内部node版本 在代码中打印信息 console.info(process.versions...版本对应node_abi版本都是一样 所以 --abi=72 整体命令就是 npm rebuild --runtime=electron --target=6.0.12 --disturl=https

    4.9K20

    25 修饰键盘事件与鼠标事件

    如果系统之间key名与按键方式存在差异,最好还是使用keyCode较为简单 目录 修饰键盘事件 使用组合控制键修饰键盘事件 精准修饰控制 修饰鼠标事件 修饰键盘事件 一般js监听键盘事件,例如keyup...,无论用户是哪个键,例如a/b/c,事件函数都会触发。...vue为了简化开发,对键盘事件、鼠标事件,提供了修饰符,方便只在用户某个特定键值时触发函数。...如果记不住keyCode数字,可以用上面的onKey函数检测一。 使用组合控制键修饰键盘事件 有些时候需要按组合键,例如监听同时alt键情况,例如: !...="mousedown.right" v-on:mousedown.right="onMouse" /> 分别代表监听鼠标左键与右键

    2.7K20

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

    title.innerHTML = this.innerHTML; menu.style.display = "none"; }; };//当实在找不到错误时候...提示: 1、点击三角时需阻止事件冒泡 二、 展开菜单之后,在document对象上绑定keyup事件,(键盘事件不是某个具体对象了,所以要帮到document上面来)向下方向键,选中下一个选项...,向上方向键,选中上一个选项,下回车键菜单收起,显示选中项 提示: 1、 声明一个全局index变量初值为-1 2、 向下方向键时index递增,当递增至大于等于菜单选项总数时恢复为0 3...、 向上方向键时判断index,如若小于等于0则设为菜单选项总数,之后递减index 4、 根据index值将对应选项设为当前(灰色背景) 5、 下回车键时将对应选中选项设为菜单标题,且将所有选项设为无背景...,index恢复为-1,菜单收起 注意:没有任何选项被选中时,下回车键不做任何操作 三、鼠标滑过每个选项时高亮显示,离开时去掉背景,点击高亮选项时菜单标题改变 提示: 1.遍历所有a标签,绑定鼠标点击事件

    3.2K50

    常见触发函数事件(实现不同用户体验)

    js时候都知道,函数是我们基本上面每天都在写一个东西,因为很多功能是需要函数来实现,没有函数很多效果是没办法实现,那么今天简单总结一可以触发函数一些事件。...onmousedown //鼠标下去触发 应用场景:一般是可以输入地方,例如type=textinput。 效果实现:当鼠标点击在输入框下去瞬间时候触发这个函数。...onkeydown //键盘下去触发 应用场景:实时获取键盘输入数据时候。...onkeypress //键盘完成一次按压抬起触发 应用场景:实时获取键盘输入数据 效果实现:将鼠标移动到该元素上面,这个时候按压任意字母或者数字键均可以触发,那么numlock关闭时候呢?...这个是不可以,系统按键也是不可以,例如方向键

    91520

    前端学习(53)~键盘事件

    鼠标的拖拽事件 拖拽流程: (1)onmousedown:当鼠标在被拖拽元素上时,开始拖拽; (2)onmousemove:当鼠标移动时被拖拽元素跟随鼠标移动; (3)onmouseup:当鼠标松开时...鼠标的滚轮事件 onmousewheel:鼠标滚轮滚动事件,会在滚轮滚动时触发。但是火狐不支持该属性。 DOMMouseScroll:在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。...键盘事件 事件名 onkeydown:按键被。 onkeyup:按键被松开。 注意: 如果一直着某一个按键不松手,那么,onkeydown事件会一直触发。...此时,松开键盘,onkeyup事件会执行一次。 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,后续间隔会非常快。这种设计是为了防止误操作发生。...}; 举例:通过键盘方向键,移动盒子 代码实现: <!

    1K20

    jsonp跨域实现几种方式

    但是总不能把一堆关键字放到前台让用户看,至少得跟百度一样,可以用鼠标键盘方向键从候选词框里选词吧。...最关键来了,现在开始写完整智能提示并配合鼠标键盘对候选词操作(源码里index.html页面),实现如下功能: 即时监控字母键和数字键,就发ajax请求(也可以设置延迟发请求,源码里有);...同时监控空格、退格、Delete、Enter等键; 鼠标移入弹出层高亮选中行,点击可上屏; 按键盘上下方向键可以选择候选词,回车提交跳转到百度搜索页面; 点击页面其他部位自动隐藏弹出框; ESC键隐藏弹出框...监控鼠标键盘输入js(autoComplete.js 源码里有更详细注释): var timeoutId; //延迟请求服务器 var highlightindex = -1; //高亮标记...可以鼠标选择候选词也可以键盘方向键选择,点击即可上屏,回车直接跳到百度页面: 源码:点击下载 在线演示地址:点击跳转

    3.4K20

    bootstrap-suggest插件

    keyword 出现,或字段数据包含于 keyword 中 支持单关键字、多关键字输入搜索建议,多关键字可自定义分隔符 支持 data 数组数据搜索、 URL 请求搜索和首次请求URL数据并缓存搜索三种方式...,并传回结果到第二个参数 2、onSetSelectValue:当从下拉菜单选取值时触发,并传回设置数据到第二个参数 3、onUnsetSelectValue:当设置了 idField,且自由输入内容时触发...、bootstrap.min.js 2、引入插件js: bootstrap-suggest.min.js 1.5.1 前端关键代码: <label class="col-sm-2 control-label...(推荐) /* 搜索相关 */ autoSelect: true, // <em>键盘</em>向上/下<em>方向键</em>时,是否自动选择值 allowNoKeyword: TRUE...//向上<em>方向键</em> keyRight: 39, //向右<em>方向键</em> keyDown: 40, //向下<em>方向键</em> keyEnter

    10.9K40

    Easy Games With Python and Pygame(三)- Pygame Event

    只有有按键或者鼠标点击都会发生事件,这个事件会存储在队列中等待处理 键盘事件 键盘事件包括KEYUP和KEYDOWN,KEYUP表示松开键盘按键,KEYDOWN表示键盘按键,Escape是默认退出键...我们可以增加一个键盘事件处理器,当方向键或者下方向键时外星人可以上下移动,也就是说需要检测KEYDOWN事件并且检测按键是上方向键还是下方向键,然后再去做相应处理 修改while代码块 while...alien.rect.top += 10 # 中间代码不变 pygame.quit() 再次重新启动程序,使用上下方向键操作 但是这里还要一个问题,就是当持续按住下方向键时,外星人只会往下移动一次,我们期望是当连续时...,这些都在pygame.locals中,字母都是以K_开头,比如在使用上下方向键操作外星人时,还可以使用K_w键和K_s键来代替上和下方向键 鼠标事件 常用事件除了键盘事件还有鼠标事件,既用鼠标来进行操作...,只有鼠标按键时拖动鼠标外星人位置才会随着鼠标移动。

    1.5K10

    Visual Studio 2008 每日提示(一)

    27/did-you-know-how-to-do-box-selection-in-the-editor.aspx 操作步骤: Shift+Alt+方向键 评论:这个功能在编辑代码时候很实用,...2、Alt + -(减号)。 3、用方向键选中“move”,回车。这时,就可以通过方向键来拖动窗体了,移动到需要停靠位置,回车即可。...3、用方向键选择“尺寸”命令 4、此刻,使用方向键将箭头移至需要窗口边沿调整窗口大小。 5、回车提交,或Esc键取消。...注意:如果同时Alt和空格键,将激活VS主窗口系统菜单,因此必须在按空格键之前放开Alt键。 评论:这个技巧和上个一样,最适合习惯用键盘操作的人。...1、SHIFT+ALT (顺序不能反过来) 2、移动方向键来选择需要操作. 3、回车选择操作。 注意:不能用Alt+Shift 评论:在我看来还是鼠标点起来方便,除非你非常依赖键盘

    1.5K70

    在windows模拟鼠标键盘输入几种方法 (附带源代码)

    在windows模拟鼠标键盘输入几种方法     最近小叮咚使用服务器(第3方asp服务器,不是iis)在启动后总是不能自动运行,可能里面有Bug,需要点击启动按钮后才能连接到internet上...为了保证小叮咚稳定运行,我把我机器(放在家)配置成每小时启动一次,启动后自动运行服务器软件     这个软件没有类似: /run 等命令行启动方式,于是我想,能不能用程序自动实现 模拟鼠标点击按钮功能呢...因为我需求和运行环境允许我这么做:     1 这个软件启动后"运行"按钮显示位置固定     2 只需要点击一运行按钮就可以,     有上面2个条件,所以用程序模拟执行点击运行按钮方法是可行...于是我用google展开调查 :-)     作为程序员,解决这样问题有两个方法: 1 用现成程序 2 自己做    具体怎么来就看.....实际需要喽     在google上输入,鼠标模拟,就可以发现一几种选择...看来它集成了 键盘按键,鼠标活动,手写板输入等信息,完全可以实现前面提出需求.

    8.8K50

    「解放双手」老舅教你VS Code Disco

    左手键盘操作 左手不够长,那就右手来凑。记住,触控板锁上,再把鼠标扔一边。...Option + 上下方向键 将当前行,或者当前选中几行代码,在编辑器里上下移动 Shift + option + 上下方向键 向上或向下复制一行 这些操作好好练习一,你Cmd + C和Cmd...,Shift + Tab减少缩进 依次Command + k Command + 0 全部折叠代码 依次Command + K Command + J 全部展开代码 指向闪耀灯球儿 操作光标...Command + Enter Ctrl + Tab同时,先松开Tab,在列表中通过Tab切换选择你需要打开文件,选中即松开Ctrl实现跳转。...单击鼠标左键:移动光标 双击:选中当前光标下单词 三连击:选中当前行 四连击:选中整个文档 单击行号并移动鼠标即可选中多行代码 鼠标选中行直接拖放可以移动被选中代码块 鼠标左键拖拽过程中Option

    1.2K30

    H5C3第四节

    主轴:Flex容器主轴主要用来配置Flex项目,默认是水平方向侧轴:与主轴垂直轴称作侧轴,默认是垂直方向方向:默认主轴从左向右 ,默认侧轴从上到 ?...stretch:拉伸,不设置高度情况。...scrollBar 是否包含滚动条,默认false,如果设置为true,那么浏览器自定滚动条会出现,这个时候,页面滚动还是页滚动,但是浏览器也能滚动。不建议开启,不然会不同步。...keyboardScrolling 是否可以使用键盘方向键导航,默认true navigation 是否显示导航,默认为false,设置为true,会显示小圆点,作为导航 navigationPositon...) 页面滚动到某一个幻灯片时候触发这个回调函数 afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex) 当离开某一个幻灯片时候触发一次这个回调函数

    5.3K30
    领券