JS键盘事件—onkeydown,onkeyup
2019-06-08 12:57
2546 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_43409765/article/details/91332277
键盘事件
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都被按下了"); } } //获取input var input=document.getElementsByTagName("input")[0]; input.onkeydown=function(event){ event=event||window.event; //使文本框中不能输入数字 0——9的编码是48——57 小键盘的是96——105 if((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、onkeypress、onkeyup
- js中的键盘事件:onkeydown、onkeypress、onkeyup
- JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
- 解决js中onkeydown事件键盘控制div移动鼠标卡顿
- JS中onkeydown, onkeyup, onblur 三个事件对比 并js实现判断文本框是否为空和按Enter键实现Tab换行
- 键盘按下和抬起事件(onKeyDown和onKeyUp)
- JS中使用onkeydown事件来实现键盘效果
- js 判断键盘事件大全 兼容FireFox和IE(退格、制表、回车、空格、方向键、删除键等)
- js在web页面上捕捉键盘事件
- js 鼠标键盘事件穿透 pointer-events
- js键盘事件全面控制详细解析
- onKeypress 与onKeyDown 事件在键盘中所代表数值的差异
- js 键盘监听事件
- js对键盘输入事件绑定到特定按钮。
- JS基础内容小结(event 鼠标键盘事件)(三)
- JS键盘事件下拉菜单demo
- js鼠标按键事件和键盘按键事件用法实例汇总
- 通过onkeypress和onkeydown事件禁用键盘中某些键
- js键盘事件全面控制
- js键盘上下左右(方向键)事件