098_键盘事件

最新推荐文章于 2023-02-13 16:01:08 发布
最新推荐文章于 2023-02-13 16:01:08 发布
阅读量214 收藏
点赞数
分类专栏： JavaScript学习 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/112299323
版权
本文详细介绍了onkeydown、onkeypress和onkeyup这三个键盘事件的触发顺序、语法、适用元素以及关键用例。通过实例演示了如何在HTML和JavaScript中应用这些事件，适合前端开发者理解键盘操作的监听机制。
摘要由CSDN通过智能技术生成

1. onkeydown事件

1.1. onkeydown事件会在用户按下一个键盘按键时发生。

1.2. 与onkeydown事件相关联的事件触发次序:

  • onkeydown
  • onkeypress
  • onkeyup

1.3. 语法

1.3.1. html中:

<element onkeydown="SomeJavaScriptCode">

1.3.2. JavaScript中:

object.onkeydown=function(){SomeJavaScriptCode};

1.4. onkeydown属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。一般给body、input和textarea元素使用。

1.5. 键盘上几乎所有的键都监听onkeydown事件, 测试了自己的键盘只有PrintScreen键没有监听onkeydown事件。

2. onkeypress事件

2.1. onkeypress事件会在键盘按键被按下并释放一个键时发生。

2.2. 语法

2.2.1. html中:

<element onkeypress="SomeJavaScriptCode">

2.2.2. JavaScript中:

object.onkeypress=function(){SomeJavaScriptCode};

2.3. onkeypress属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。一般给body、input和textarea元素使用。

2.4. 一下键不监听onkeypress事件。

3. onkeyup事件

3.1. onkeyup 事件会在键盘按键被松开时发生。

3.2. 语法

3.2.1. html中:

<element onkeyup="SomeJavaScriptCode">

3.2.2. JavaScript中:

object.onkeyup=function(){SomeJavaScriptCode};

3.3. onkeyup属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。一般给body、input和textarea元素使用。

3.4. 键盘上所有键都监听onkeyup 事件。

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>键盘事件</title>
	</head>
	<!-- 参数必须传递event -->
	<body onkeydown="mykeydown(event)">
		<p>请按下键盘上的任意键: <br /></p>

		<script type="text/javascript">
			var myP = document.querySelector("p");

			function mykeydown(e){
				myP.innerHTML += ("onkeydown ");
			}

			document.body.onkeypress = function(e){
				myP.innerHTML += ("onkeypress ");
			}

			document.body.addEventListener("keyup", mykeyup, false);

			function mykeyup(e){
				myP.innerHTML += ("onkeyup" + "<br />");
			}
		</script>
	</body>
</html>

4.2. 效果图

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 键值判断
yr123456654321的博客
01-25 339
$("body").on("keydown",function(event){ debugLog("event.which："+event.which); if(event.which === 37){ debugLog("left37") event.preventDefaul...
C#.net_经典编程例子400个
05-17
130 实例096　利用ErrorProvider组件查看数据集中的错误　132 3.3　EventLog组件　134 实例097　使用EventLog组件读写Windows系统事件日志　134 实例098　使用EventLog组件保存Windows系统日志　...
html之文本框的onkeydown()响应Enter键——键盘事件
程序羊的博客
10-18 9113
事件目录常见的jQuery事件常见的鼠标、键盘事件 很多时候，我们需要在html的输入框中按下回车键（Enter）做模糊查找，那么就可以使用到 onkeydown 事件了。 示例代码： <html> <body> <input onkeydown="if(event.keyCode==13) {test()}"/> <script> fun...
html+body+on+键盘事件,JavaScript事件类型：键盘事件与焦点事件
weixin_34416354的博客
06-05 346
键盘事件用户在使用键盘时会触发键盘事件。1、keydown事件和keyup事件keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件。Keyup：当用户释放键盘上的键时触发。event对象属性在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上的一个特定的键对应。Dom和IE的event对象都支持keyCode属性。例子：...
Java Script (5)
zhuxyyds的博客
10-11 99
JavaScriptDOM对象
unity3d吃豆人素材和源码
05-29
开发者需要编写C#脚本来监听键盘事件，并据此更新角色的运动状态。 5. **碰撞检测**：吃豆人吃到食物或者与幽灵碰撞时，需要进行碰撞检测。Unity3D的Collider组件负责这部分工作，可以设置不同类型的碰撞器以适应...
QQ 自动登陆
02-28
它们可能利用了QQ客户端的API接口，或者通过模拟键盘和鼠标事件来控制界面交互。 6. **反检测机制**：QQ官方可能会有反自动登录的机制，例如频繁的自动登录可能会触发安全警告。因此，自动登录程序需要考虑如何避免...
C++Builder精彩编程实例集锦的源代码后3部分.rar
11-28
实例098 如何替换文本文件中的字符串 实例099 如何将长文件名转换为短文件名 实例100 如何在文件打开对话框中选择多个文件 实例101 如何定制文件打开和关闭对话框 实例102 如何修改文件打开对话框的按钮标题 ...
C语言课程设计 通讯录管理系统
10-26
通过读取键盘事件并更新显示的菜单选项，增强了用户的交互体验。 在实现这个功能时，可能用到了诸如ncurses或termcap这样的库，它们能帮助开发者在终端上进行更复杂的文本输出和控制。理解这些库的工作原理和使用...
js键盘事件
m0_63400611的博客
12-12 1073
键盘事件 点击键盘按键后触发键盘事件 代码 //1.keyup 键盘按键弹起 document.addEventListener('keyup', function() { console.log('弹起'); }) //2.keydown 键盘按键按下 document.addEventListener('keydown', function() { console.log('按下down'); }) //3.keypress 键盘按键按下 .
onkeydown 解决按回车键直接提交方案
数据库
04-11 410
登陆页面需要扑捉用户按下回车自动提交的需求: 在body里添加onkeydown事件 跳javascript 在提交表单。 查找文档如下 onkeydown 事件会在用户按下一个键盘按键时发生。 语法：onkeydown="SomeJavaScriptCode" 支持该事件的html标签; &lt;a&gt;, &lt;acronym&gt;, &lt;address&gt;, &...
onkeydown基本用法
万豪给给的博客
08-09 6277
使用举例： function noNumbers(e) { var keynum var keychar var numcheck if(window.event) // IE { keynum = e.keyCode } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which } k
初识onkeydown及其兼容性问题
极客神殿
05-16 1082
在js中用：document.onkeydown来对用户敲击键盘事件进行监听，在网上整理了点，现将资料集中于此。 概念onkeypress、onkeyup、onkeydown区别： onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。 onkeydown 这个事件在用...
JavaScript14——常用的键盘事件
小白的学习路
11-14 335
1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() {
keyup事件失效
weixin_44788220的博客
01-14 1111
keyup事件失效
在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
热门推荐
认知 行动 坚持
03-06 3万+
         在html输入框中响应enter键， 这本来就是很简单的问题， 但我查了一下网上资料， 多数写的有点复杂， 其实， 用onkeydown即可搞定， 如下：   &lt;html&gt; &lt;body&gt; &lt;input onkeydown="if(event.keyCode==13) {test()}"/&gt; &lt;script&gt; functio...
js 中HTML的 onkeycode 和onkeydown属性事件
weixin_30617695的博客
05-30 495
<!DOCTYPE html><html><head><script>function displayResult(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();}</script></head><body> &l...
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 3896
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
java 监听 按键_java 键盘监听事件
最新发布
05-27
Java 中可以通过实现 KeyListener 接口来监听键盘事件。具体步骤如下： 1. 在需要监听键盘事件的组件上添加 KeyListener，例如 JFrame、JPanel 等。 ```java JFrame frame = new JFrame(); frame.addKeyListener...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值