JavaScript 键盘事件

最新推荐文章于 2024-01-15 21:35:53 发布

tianluye

最新推荐文章于 2024-01-15 21:35:53 发布

阅读量553

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tianluye/article/details/50434860

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript 键盘事件

1、onkeypress 事件：当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function displayKey(e) {
		if (e.keyCode)
			keyCode = e.keyCode;
		else
			keyCode = e.which;
		character = String.fromCharCode(keyCode);
		alert(character);
	}
</script>
</head>
<body οnkeypress="displayKey(event);">
</body>
</html>

2、onkeyup 事件：当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function displayKey(e) {
		if (e.keyCode)
			keyCode = e.keyCode;
		else
			keyCode = e.which;
		character = String.fromCharCode(keyCode);
		alert(character);
	}
</script>
</head>
<body οnkeyup="displayKey(event);">
</body>
</html>

3、onkeydown事件：当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function displayKey(e) {
		if (e.keyCode)
			keyCode = e.keyCode;
		else
			keyCode = e.which;
		character = String.fromCharCode(keyCode);
		alert(character);
	}
</script>
</head>
<body οnkeydοwn="displayKey(event);">
</body>
</html>

问题：

当键盘事件为 onkeyup、onkeydown 的时候，alert(...) 出的都是大写，并且enter、ctrl键也会有输出；

但是使用onkeypress 就可以正确的捕获按下键的大小写。

执行顺序：

onkeydown --> onkeypress --> onkeyup

tianluye

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 键盘事件

JavaScript 键盘事件1、onkeypress 事件：当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]Insert title here function displayKey(e) { if (e.keyCode) keyCode = e.keyCode; else keyCode = e.which; cha
复制链接

扫一扫