WEB前端 | JS基础——(9-2)键盘事件

最新推荐文章于 2024-04-23 21:21:46 发布

Erosvan

最新推荐文章于 2024-04-23 21:21:46 发布

阅读量1.3k

点赞数

文章标签： web前端 javascript JS基础键盘事件

本文链接：https://blog.csdn.net/Erosvan/article/details/53046311

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>键盘事件</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get">
		<input type="text" name="userName" required/>
		<input type="submit" value="提交按钮"/>
		</form>
	</body>
	<script type="text/javascript">
		var count = 0;
		// 键盘事件
		// onkeydown 键盘按下去的时候触发，如果长按，就会连续触发绑定的方法
		// onkeyup 键盘按下去并抬起来的时候触发，
		
//		document.onkeyup = function(ev) {
//			var evObj = window.event || ev;
//			// keyCode 是每个键盘事件的一个编码，可以改变
//			console.log(evObj.keyCode);
//		}

		document.onkeydown = function(ev) {
			var evObj = window.event || ev;
			if (evObj.keyCode == '13' && evObj.ctrlKey) {
				console.log('发表');
			}
			if (evObj.keyCode == '68' && evObj.shiftKey) {
				console.log('右移');
			}
			if (evObj.keyCode == '75' && evObj.shiftKey && evObj.altKey) {
				console.log('开始');
			}
		}
		// 长按p键 只触发一次
		var n = 0;
		document.onkeydown = function(ev) {
			var evObj = window.event || ev;
			n++;
			if (evObj.keyCode == '80' && n == 1) {
				count++;
				console.log(count);
			}
		}
		document.onkeyup = function() {
			n = 0;
		}
		
		//onkeypress 事件可以区分键盘输入的大小写字母
		document.onkeypress = function(ev){
			//使用onkeypress的时候，主要用于获取字母以及大小写，火狐等浏览器使用ev.which来获取
			var keyCode = ev.keycode || ev.which;
			console.log('点了键盘' + keyCode);
		}
		
		var form = document.getElementsByTagName('form')[0];
		// onsubmit 可以帮我们自定义一个表单提交事件，同时可以返回false来阻止默认的表单提交跳转。
		// 也可以使用ev.preventDefault() 来阻止跳转(IE6 - 8 不兼容)。
		form.onsubmit = function(ev) {
			console.log('表单要提交了');
			// return false;
			ev.preventDefault();
		}
		
		var userName = document.getElementsByTagName('input')[0];
		userName.onfocus = function() {
			console.log('聚焦');
		}
		userName.onblur = function() {
			console.log('失焦');
			// 让文本框聚焦
			userName.focus();
		}
	</script>
</html>

Erosvan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 | JS基础——(9-2)键盘事件

键盘事件 var count = 0; // 键盘事件 // onkeydown 键盘按下去的时候触发，如果长按，就会连续触发绑定的方法 // onkeyup 键盘按下去并抬起来的时候触发， // document.onkeyup = function(ev) {// var evObj = window.e
复制链接

扫一扫