键盘事件

如果想实现快捷的页面操作，或者是一些前端的游戏，了解键盘事件很重要；
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开

这些键盘事件可以使用于除了：
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>其它所有HTML 元素

键盘键值对应的键值码（ascii码）

onkeydown 键盘按下事件

定义和用法：onkeydown 事件会在用户按下一个键盘按键时发生。
如果长按这个按键没松开，那么就会一直调用onkeydown 的方法；
提示：与 onkeydown 事件相关联的事件触发次序:

onkeydown 键盘按下事件

onkeypress 键盘按下并松开事件

onkeyup 键盘松开事件

下面代码可以通过输入框聚焦之后，获取在键盘上按键的所有值：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onkeydown</title><script>function myFunction() {console.log(event) // 对应按键对象所有属性document.getElementById("domKey").innerHTML = event.keydocument.getElementById("domCode").innerHTML = event.codedocument.getElementById("domAscii").innerHTML = event.which}</script></head><body><p>当你在输入框内按下一个按键是函数被触发</p><input type="text" onkeydown="myFunction()"><p>按下按键的Key：<span id="domKey"></span></p><p>按下按键的Code：<span id="domCode"></span></p><p>按下按键的ascii码：<span id="domAscii"></span></p></body>
</html>

了解以上代码逻辑之后，实现一个简单的效果：
需求：控制一个小方块在页面中的移动，上 — w，下 — s，左 — a ，右 — d，

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onkeydown</title><style type="text/css">body {position: relative;}#boxId {position: absolute;top: 60;left: 60;width: 40px;height: 40px;border-radius: 50%;background-color: red;}</style><script>let domTop = 60; // 初始化let domLeft = 60;// 这里只做了上和左的碰撞校验// 直接将方法丢给body全局触发// 一直按住按键也可以一直移动function myFunction() {let boxDom = document.getElementById("boxId")if (event.which == 87) { // 上 w 87if (domTop > 0) {domTop -= 10;}} else if (event.which == 68) { // 右 d  68domLeft += 10;} else if (event.which == 83) { // 下 s 83domTop += 10;} else if (event.which == 65) { // 左 a 65if (domLeft > 0) {domLeft -= 10;}}boxDom.style.top = domTop + "px";boxDom.style.left = domLeft + "px";}</script></head><body onkeydown="myFunction()"><div id="boxId"></div></body>
</html>

onkeyup 键盘松开事件

onkeyup 事件会在键盘按键被松开时发生
提示：onkeyup 与 onkeydown 的区别：onkeyup 事件只能一次一次的触发，不能像onkeydown 长按持续触发

下面函数将字符转换为大写：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onkeyup</title><script>function myFunction() {var x = document.getElementById("fname");x.value = x.value.toUpperCase();}</script></head><body><p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>输入你的名称: <input type="text" id="fname" onkeyup="myFunction()"></body>
</html>

onkeypress 键盘按键被按下并松开

onkeypress 事件会在键盘按键被按下并释放一个键时发生
注意：在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件

下面函数将字符转换为大写：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onkeypress</title><script>function myFunction() {alert("你在输入框内按下一个按键");}</script></head><body><p>当用户在输入框内按下一个按键时函数被触发</p><input type="text" onkeypress="myFunction()"></body>
</html>

HTML DOM 事件 —— 键盘事件 JS键盘事件相关推荐

Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
php如何检测键盘按键,js键盘事件，判断按下的是哪个键
在写页面的时候,尤其是桌面端的时候,我们有时候要知道用户按下了那个按键,对于这个问题我们可以使用js提供的keyCode属性来操作,如: document.onkeydown = function ( ...
jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'><div id="middle" oncli ...
JS焦点事件和事件冒泡
焦点事件 JS中focus事件获得焦点,blur失去焦点,这些事件默认情况下只有表单可以触发,如果想让div等元素触发需要加tabindex属性 <div class="list&qu ...
JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...
java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
JS键盘事件(非常详细)
在JavaScript中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种 ...

HTML DOM 事件 —— 键盘事件 JS键盘事件

键盘事件

键盘键值对应的键值码（ascii码）

onkeydown 键盘按下事件

onkeyup 键盘松开事件

onkeypress 键盘按键被按下并松开

HTML DOM 事件 —— 键盘事件 JS键盘事件相关推荐

最新文章

热门文章