JavaScript的事件系列二

判断热键shift，ctrl，alt，win

shiftkey 当shift按下时为true，默认为false
```
var v = ev || window.event;
if(v.shiftKey)
```

ctrlkey 当ctrl按下时为true

var v = ev || window.event;
if(v.ctrlKey)

altkey 当alt按下时为true

var v = ev || window.event;
if(v.altKey)

metakey 当windows键按下时，为true mac下按下command键为true
```
var v = ev || window.event;
if(v.metaKey)
```

案例

实现一个div标签当按下ctrl标签内容为ctrl，当按下shift时，标签内容为shift，当按下alt时，标签内容为alt，当同时按下就同时显示多个，新的一次按下之前的内容清空

完整源码

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>事件对象二</title><style>html{width: 100%;height: 60%;display: flex;justify-content: center;align-items: center;}.d1{background-color: rgba(234, 113, 20, 0.62);width: 350px;height: 40px;border-radius: 12px;font-size: 26px;text-align: center;}</style>
</head>
<body>
<div class="d1" id="d"></div>
<script>var arr = [];//定义数组用来接收按键的内容var d = document.getElementById("d");window.onkeydown = function (ev) {var v = ev || window.event;if(v.shiftKey){arr.push("shift");}if(v.ctrlKey){arr.push("ctrl");}if(v.altKey){arr.push("alt");}if(v.metaKey){arr.push("win");}d.innerText = arr;arr = [];//按下结束进行清零}
</script>
</body>
</html>

获取键码

keydown情况下

使用keyCode 这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码

var v = ev || window.event;//获取事件对象
//这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码
var which = v.which || v.keyCode;//获取事件对象的键码属性，返回值为number

keypress情况下

使用charCode 区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码

var v2 = ev2 || window.event;
//区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码
var which = v2.which || v2.charCode;//获取字母的键码，返回值为number

案例

完善之前的案例，建立两个div，上面显示keydown的情况，下面显示keypress情况

完整源码

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>事件对象二</title><style>html{width: 100%;height: 60%;display: flex;justify-content: center;align-items: center;}.d1{background-color: rgba(234, 113, 20, 0.62);width: 350px;height: 40px;border-radius: 12px;font-size: 26px;text-align: center;margin-top: 10px;}</style>
</head>
<body><div class="d1" id="d"></div><div class="d1" id="d2"></div>
<script>var arr = [];//定义数组用来接收按键的内容var arr2 = [];//定义数组用来接收按键的内容var d = document.getElementById("d");var d2 = document.getElementById("d2");window.onkeydown = function (ev) {var v = ev || window.event;//获取事件对象//这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码var which = v.which || v.keyCode;//获取事件对象的属性if(v.shiftKey){arr.push("shift");}if(v.ctrlKey){arr.push("ctrl");}if(v.altKey){arr.push("alt");}if(v.metaKey){arr.push("win");}arr.push(which);d.innerText = arr;arr = [];//按下结束进行清零}window.onkeypress = function (ev2) {//keypress对shiftkey。。。无效var v2 = ev2 || window.event;//区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码var which = v2.which || v2.charCode;if(v2.shiftKey){arr.push("shift");}if(v2.ctrlKey){arr.push("ctrl");}if(v2.altKey){arr.push("alt");}if(v2.metaKey){arr.push("win");}arr2.push(which);//把键码加入arr2数组d2.innerText = arr2;arr2 = [];//按下结束进行清零}
</script>
</body>
</html>

JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4相关推荐

Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
JavaScript三大事件（二十二）
JS三大事件鼠标事件 click:单击 dblclick:双击 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮 mouseout:鼠标离开 mousemove: ...
深度学习入门笔记系列 ( 二 )——基于 tensorflow 的一些深度学习基础知识
本系列将分为 8 篇 .今天是第二篇 .主要讲讲 TensorFlow 框架的特点和此系列笔记中涉及到的入门概念 . 1.Tensor .Flow .Session .Graphs TensorFlo ...
二狗子的C语言学习之路（数组）
一.数组的概念: 1.数组:由多个类型相同数据的集合 2.元素访问:a[n]~a[n-1] 二.定义 1.int inta[10]={0,1,2,3}: 2.#define N 10 //宏定义 in ...
重学JavaScript深入理解系列（六）
JavaScript深入理解--闭包(Closures) 概要本文将介绍一个在JavaScript经常会拿来讨论的话题 -- 闭包(closure).闭包其实已经是个老生常谈的话题了: 有大量文章都 ...
重学JavaScript深入理解系列（一）
JavaScript深入理解--执行上下文(Execution Context) 定义每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文. 执行上下文(简称:EC) 以 ...
Javascript乱弹设计模式系列(1) －观察者模式(Observer)
前言博客园谈设计模式的文章很多,我也受益匪浅,包括TerryLee.吕震宇等等的.NET设计模式系列文章,强烈推荐.对于我,擅长于前台代码的开发,对于设计模式也有一定的了解,于是我想结合Javasc ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
Vue+iview键盘事件keyup、keydown、keypress
详解键盘事件(keydown,keypress,keyup) 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键顺序 ...

JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

JavaScript的事件系列二

判断热键shift，ctrl，alt，win

案例

完整源码

获取键码

keydown情况下

keypress情况下

案例

完整源码

JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4相关推荐

最新文章

热门文章