JavaScript中键盘事件

最新推荐文章于 2022-06-08 10:12:02 发布
最新推荐文章于 2022-06-08 10:12:02 发布
阅读量856 收藏 1
点赞数 1
分类专栏： js基础教程 文章标签： javascript js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plannothing/article/details/108086334
版权 
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 键盘事件
			 *  onkeydown
			 * 			- 按键被按下
			 * 			- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
			 * 			- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快
			 * 				这种设计是为了防止误操作的发生
			 *  onkeyup
			 * 			- 按键被松开
			 * 
			 * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
			 * 
			 */

// document.onkeydown = function(event){
// event = event || window.event

				/*
				 * 可以通过keyCode来获取按键的编码
				 * 	通过它可以判断哪个按键被按下
				 * 除了keyCode.事件对象中还提供了几个属性
				 * altKey
				 * ctrlKey
				 * shiftKey
				 * 			- 这个三个用来判断alt,ctrl和shift是否被按下
				 * 				如果按下则返回true，否则返回false
				 * 
				 */
				
				//判断一个y键是否被按下
				//判断y和ctrl是否同时被按下

// if(event.keyCode==89 && event.ctrlKey){
// console.log(“ctrl和y都被按下了”);
// }
// console.log(event.keyCode);
// console.log(“按键被按下了”);
// };
// document.onkeyup = function(){
// console.log(“按键被松开了”);
// };

			//获取input
			var input = document.getElementsByTagName("input")[0];
			
			input.onkeydown = function(event){
				event = event ||window.event;
				
				//使文本框中不能输入数字，数字48-57
				if(event.keyCode>=48 && event.keyCode<=57){
					return false;
				};
				console.log("按键被按下");
				//在文本框中输入内容，属于onkeydown的默认行为
				//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中

// return false;
};
};

		</script>
		</head>
	<body>
	<!--<div id="box1" style="width: 100px; height:100px; background-color:red;">
		
	</div>-->
	
	<input type="text"/>
</body>
</html>

当在文本框中输入数字时不会显示数字，输入其他字符会显示
在这里插入图片描述

plannothing
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（886）：常用的键盘事件
歌谣的博客
04-18 536
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
js常用的键盘事件和对象
weixin_45617525的博客
02-23 924
js常用的键盘事件和对象3个常用事件键盘事件对象之keyCode使用事件keydown和keyCode模拟京东按钮输入内容使用事件keyup实现该功能知识来源 3个常用事件 // 常见的键盘事件 // 1.keyup按键弹起的时候触发 // document.onkeyup = function(){ // console.log('我弹起了'); // } document.addEventListener('keyup',function(){
js键盘事件
m0_51281306的博客
11-09 2664
键盘事件是指当用户在操作键盘的时候会自动被触发的事件， 通 常有以下三种： ( 1) onkeydown: 用户按下任意键都可以触发这个事件。如果按住不 放， 事件会被连续触发。 (2) onkeypress: 用户按下任意键都可以触发这个事件 ( 功能键除外 ) 。 如果按住不放， 事件会被连续触发 (3) onkeyup: 用户释放按键时触发 ps ： 键盘事件一般绑定在需要用户输入的元素上(例如 i nput) ， 但是由于键盘事件默认采用事件冒泡机制， 因此将键盘事件直接 绑定在 body 之
JS中的键盘事件（onkeydown、onkeyup、keyCode）
Fantasc的博客
08-14 1万+
键盘事件： okeydown:键盘被按下，如果一直按着键盘的按键，则okeydown事件会一直被触发。 - 当键盘按键一直被按住的时候，事件被连续触发，第一次和第二次以及后面的n次之间，触发的时间间隔会稍长，在0.5秒左右（一直按着按键，事件连续触发，第一次触发之后会有0.5秒左右的延迟，后面的连续触发事件不会有延迟，延迟只在第一次和第二次之间）。这种设计是为了防止误操作。 在页面中需要判断按键是否被按下，可以用一个简单的例子进行测试，如下： <script type="text/javasc
【JavaScript 教程】事件——键盘事件
油墨香^-^的博客
06-08 1870
作者 | 阮一峰 键盘事件的种类 键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。 keydown：按下键盘时触发。 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。 keyup：松开键盘时触发该事件。 如果用户一直按键不松开，就会连续触发键盘事件，触发的顺
javascript中键盘事件用法实例分析
10-24
主要介绍了javascript中键盘事件用法,实例分析了键盘事件包含的方法及具体使用技巧,需要的朋友可以参考下
javascript 键盘事件总结 推荐
10-29
JavaScript 键盘事件是网页交互中的重要组成部分，它们允许开发者监听用户通过键盘输入时的各种行为。本文将深入探讨JavaScript中的键盘事件，以及如何利用这些事件来实现特定的功能。 首先，让我们了解一下...
JavaScript监听键盘事件代码实现
10-15
主要介绍了JavaScript监听键盘事件代码实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript键盘事件常见用法实例分析
10-17
主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
常用的键盘事件
DF_jie的博客
11-24 1066
键盘事件 键盘事件 事件案例： <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 docu
js 键盘事件 鼠标单击事件
01-18
事件名称 说明 onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。 onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
使用JS监听键盘按下事件（keydown event）
12-13
1、监听全局键盘按下事件，例如监听全局回车事件 $(document).keydown(function(event){ if(event.keyCode == 13){ alert('你按下了Enter'); } }); 2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件 $("#btn").keydown(function(event){ if(event.keyCode==13){ alert('你按下了Enter'); } }); 3、如果是要监听组合键，例如监听ctrl+c $(document).keyup(f
js 键盘事件
qq_35187942的博客
01-07 5599
onkeydown:当键盘按键按下的时候触发 onkeyup:当键盘按键抬起的时候触发 event.keyCode:数字类型 键盘按键的值 键值 ctrlKey,shiftKey,altKey 布尔值 当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true,否则返回false 当鼠标按住ctrl键并点击页面，返回true，若只点击页面，则返回f...
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
JavaScript 获取键盘事件(键盘某个按键被按下)
良_123的专栏
05-24 3万+
键盘事件（Keyboard Events） 属性 值 描述 onkeydown script 当按下按键时运行脚本 onkeypress script 当按下并松开按键时运行脚本 onkeyup script 当松开按键时运行脚本 js中获取键盘事件
js监听键盘事件的方法—原生和jquery的区别
kevin_cyj的博客
08-10 1万+
经常需要监听键盘的事件，以便做更好的操作，基本原理是：监听全局键盘，每一个键盘，当用户按下某一按键时，返回对应的键值，然后再判断用户按下了哪一科按键，键值对应按键的名称在最下面列出，自行比对。去以下介绍两种不同的方式 原生键盘监听事件：按下一次按键，分为三个过程，按下—按住—松开 onkeydown：某个键被按下 onkeypress：某个键盘的键被按下或按住 onkeyup：某个键盘的键
DOM以及事件
weixin_42197893的博客
03-02 170
DOM: 1、Node类型: 1.1节点类型：nodeType 12种，常见的是元素节点Node.ELEMENT_NODE(1)和文本节点TEXT_NODE(3) 1.2节点关系： 访问子节点： （1）node.childNodes:保存着一个NodeList对象,可以用node.childNodes[0]或者node.childNodes.item(0)来访问子节点 （2）node.firs...
js 绑定的键盘事件
weixin_30900589的博客
07-15 2293
在全局绑定键盘事件 　　document.onkeydown = function(event){ //在全局中绑定按下事件 　　　　var e = event || window.e; 　　　　var keyCode = e.keyCode || e.which; 　　　　switch(keyCode){ 　　　　case 27: 　　...
js 里面的键盘事件对应的键码
HertzDL的博客
07-25 135
js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Alt_LkeyCode 19 = Pauseke...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值