js键盘事件以及键盘事件拦截
一.键盘事件
onkeydown: 按下键盘时触发
onkeypress: 按下有值的键时触发
注意:onkeypress按下Ctrl、Alt、Shift、Meta这样无值的键,这个事件不会触发对于有值的键,按下时先触发 keydown 事件,再触发这个事件onkeyup:松开键盘时触发该事件
二.组合键
ctrl相关
alt相关
meta (Mac键盘是一个四瓣的小花,Windows键盘是Windows键) 相关
shift相关
写一个举例其他都类似
比如ctrl+c
window.onkeydown=function (e) {
if (e.ctrlKey) { //其他几个类似shiftkey,altkey,metakey
if( e.key == 'c'){ //这里最好用keycode可以无视大小写,你要是区分大小写最好这样写
console.log('ctrl+c')
}
}
}
//一般简写
window.onkeydown=function (e) {
if (e.ctrlKey&&e.key == 'c'){console.log('ctrl+c')}
}
三.拦截preventDefault
比如拦截ctrl+h事件
<script>
window.onkeydown=function (e) {
if (e.ctrlKey) {
if( e.key == 'h'){
console.log('ctrl+h')
e.preventDefault();
}
}
}
</script>
但是有些按键没法拦截具体为啥没有深究过也没用到过,比如 Chrome
CtrlN
CtrlShiftN
CtrlT
CtrlShiftT
CtrlW
CtrlShiftW
//没法拦截
js键盘事件以及键盘事件拦截的更多相关文章
- Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。
在网上查询的按键码如下: 一.键盘按键和键盘对应代码表: 字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...
- Atitit.js的键盘按键事件捆绑and事件调度
Atitit.js的键盘按键事件捆绑and事件调度 1. Best的方法还是 objEvtMap[ id+evt ]=function(evt,element) 2. Event bind funct ...
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)
1. 定义JS的两种方式: <!DOCTYPE> <html> <head> <meta charset="UTF-8"></ ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装
#coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...
- jacascript 鼠标事件和键盘事件
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 鼠标事件 鼠标事件共10类,包括click.contextmenu(右键).dblclick(双击).mo ...
- jQuery-3.事件篇---键盘事件
jQuery键盘事件之keydown()与keyup()事件 鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为.相对应的键盘也有这类事件,将用户行为分解成2个 ...
随机推荐
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
- eclipse_neon 的Spket 目录下只有一个Task Tags,没有其他的选项,导致没有办法添加提示文件! 添加sdk文件之后还是没有办法显示的解决办法
问题解决办法: 将 spket-1.6.23的安装包里面的features plugins 单独复制到D:\eclipse_neon\dropins 目录下,重启一下eclipse即可正常显示! 添 ...
- Java连接数据库 #07# MyBatis Generator简单例子
MyBatis Generator是一个可以帮助我们免去手写实体类&接口类以及XML的代码自动生成工具. 下面,通过一个简单的例子介绍MyBatis Generator如何使用. 大体流程如下 ...
- SpringCloud中Feign的适配器的实现方案
前言 最近在做微服务的项目,各个系统之间需要进行调用,然后用一个适配器来实现服务之间的feign调用,使用适配器进行统一管理. 实现方案 首先我们需要将服务的名称进行单独的配置,可以方便的进行切换和扩 ...
- 如何使用SpringBoot封装自己的Starter
作者:Sans_ juejin.im/post/5cb880c2f265da03981fc031 一.说明 我们在使用SpringBoot的时候常常要引入一些Starter,例如spring-boot ...
- .NET Core 数据结构与算法 1-1
.NET Core 数据结构与算法 1-1 本节内容为顺序表 简介 线性表是简单.基本.常用的数据结构.线性表是线性结构的抽象 (Abstract),线性结构的特点是结构中的数据元素之间存在一对一的线 ...
- jvm虚拟机笔记<五> 编译期优化
JVM的编译器可以分为三个编译器: 1.前端编译器:把.java转变为.class的过程.如Sun的Javac.Eclipse JDT中的增量式编译器(ECJ). 2.JIT编译器:把字节码转变为机器 ...
- C#中获取指定路径下指定后缀名的所有文件的路径的list
场景 指定一个路径和后缀名,查找这个路径下所有以此后缀名结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取 ...
- Nuget使用时遇到的问题,Solved
在VS的程序包管理控制台中输入Install-package MySql.Data时,默认安装最新的版本8.0.18, 但是安装完成后,发现包并没有添加到项目的引用列表中, 在解决方案的package ...
- c/c++概述
c/c++的学习分为两个部分 一.语言标准 语言标准定义了功能特性和标准库两部分. 功能特性由编译器负责具体实现,比如linux下gcc,windows下Visual Studio 标准库实现依赖于具 ...