js中Keydown事件

监听全局键盘按下事件

js:window.onkeydown = function(event){ }
jquery:$(document).keydown(function(event){ });

  1. 获取按下的键值
    event.key
    例如:按下回车键的key值为"Enter";

通过监听全局键盘按下事件,来测试key值

//测试key值:
window.onkeydown = function(e){ //event可以简写成 e
	alert(e.key);
	//console.log(e.key);//不喜欢弹窗的话 可以通过控制台输出查看信息
}
  1. 获取按下的键码值
    event.keyCode
    例如:按下回车键的keyCode值为13

通过监听全局键盘按下事件,来测试keyCode值

//测试keyCode值:
$(document).keydown(function(e){
	alert(e.keyCode);
});

附上参考表:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

监听元素键盘按下事件

例如:给文本输入框标签添加一个键盘按下事件,当按下Enter键时,触发按钮的点击事件,获取文本输入框中的内容。

html:

<input type="text" id="content" value="">//输入框
<input type="button" id="get" value="获取">//按钮

js:

//1.首先获取元素对象(这里就使用jquery获取jquery对象了)
let textContent = $("#content");
let getContent = $("#get");
//2.给元素添加事件
//按钮点击事件
getContent.click(function(e){
	alter("获取的文本内容为:"+textContent.val());
});
//文本框键盘按下事件
textContent.keydown(function(e){
	//3.判断键盘按下的键是否是Enter键,或者判断键盘按下的键码值是否是13
	if(e.key == "Enter"){//e.keyCode == 13
		getContent.click();
	}
});

备注:监听元素键盘按下事件,前提需要先获得元素的焦点。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值