JS键盘事件—onkeydown，onkeyup

键盘事件

onkeydown 按键被按下

对于某个按键一直按着不放，则事件会一直触发
当onkeydown连续触发式，第一次和第二次之间会有一个间隔时间，其他之后会非常的快
这种设计是为了防止我们误操作

onkeyup 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象,或者是document

可以通过keyCode来获取按键的编码
通过它可以判断那个按键被按下

除了keyCode ，事件对象还提供了几个属性
altKey， ctrlKey ，shiftKey
这三个用来判断alt ctrl shift 是否被按下
如果按下则返回true ，否则返回false

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title><script>window.onload=function(){document.onkeydown=function(event){event=event||window.event;//console.log(event.keyCode);//判断一个y是否被按下
//              if(event.keyCode === 89){//                  console.log("y键被按下了");
//              }//判断一个y和ctrl是否被同时按下if(event.keyCode === 89 && event.ctrlKey){console.log("y键和ctrl都被按下了");}}//获取inputvar input=document.getElementsByTagName("input")[0];input.onkeydown=function(event){event=event||window.event;//使文本框中不能输入数字  0——9的编码是48——57 小键盘的是96——105if((event.keyCode >=48 && event.keyCode <= 57)||(event.keyCode >=96 && event.keyCode <= 105)){//在文本框中输入内容，属于onkeydown的默认行为//取消在onkeydown中取消默认行为，则输入的内容不会出现在文本框中return false ;}}}</script>
</head>
<body><input type="text">
</body>
</html>

键盘移动div

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>键盘移动div</title><style>#box1{width: 100px;height:100px;background-color: red;/*开启box1的绝对定位*/position: absolute;}</style><script>/*使div可以根据不同的方向键向不同的方向移动*/window.onload=function(){//为我们的document绑定一个按键被按下的事件document.onkeydown=function(event){event=event||window.event;//console.log(event.keyCode);//方向键是37——40    左上右下//定义一个变量，来表示移动的速度var speed=10;//当用户按了ctrl以后，速度加快if(event.ctrlKey){speed=50;}switch(event.keyCode){case 37:box1.style.left=box1.offsetLeft-speed+"px";break;case 38:box1.style.top=box1.offsetTop-speed+"px";break;    case 39:box1.style.left=box1.offsetLeft+speed+"px";break;  case 40:box1.style.top=box1.offsetTop+speed+"px";break;}}}</script>
</head><body><div id="box1"></div>
</body>
</html>

JS键盘事件—onkeydown，onkeyup相关推荐

javascript之键盘事件onkeydown,onkeyup,onkeypress
键盘事件键盘事件一般绑定给document,以及一些可以获取焦点的标签,如input标签. onkeydown事件: 当键盘任意键按下时执行,按下不松,会不断执行. onkeyup事件: 当键盘任意 ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
用JS键盘事件来移动图片
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/4/18 小时候都玩过下水道修理工的游戏吧,那其实是一个很简单的小游戏,用简单的JS技术就可以实现,现在我来示范一下最简单 ...
键盘事件（onkeyup onkeydown）
两者的区别 1.表示的意义不同.onkeyup键盘抬起事件,onkeydown键盘按下事件 2.触发时机不同.onkeyup 事件会在键盘按键被松开时发生.onkeydown 事件会在用户按下一个键盘 ...
键盘事件onkeydown和onkeyup
onkeydown 按键被按下,对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发,当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的 ...
JS键盘事件(非常详细)
在JavaScript中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种 ...
HTML DOM 事件 —— 键盘事件 JS键盘事件
键盘事件如果想实现快捷的页面操作,或者是一些前端的游戏,了解键盘事件很重要: onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松 ...
JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...

JS键盘事件—onkeydown，onkeyup

键盘事件

键盘移动div

JS键盘事件—onkeydown，onkeyup相关推荐

最新文章

热门文章