DOM（五）

最新推荐文章于 2022-11-22 22:15:17 发布

红人日天

最新推荐文章于 2022-11-22 22:15:17 发布

阅读量193

点赞数 2

分类专栏： WebAPI编程文章标签： js javascript dom dom操作

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114518808

版权

WebAPI编程专栏收录该内容

13 篇文章 4 订阅

订阅专栏

DOM（五）

1.常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发不识别功能键比如 ctrl shift 箭头

三个事件执行的顺序是：keydown——keypress——keyup

如果使用监听器则不需要加 on

2.键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写

实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键），Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<body>
	    <script>
	        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
	        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
	        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
	        document.addEventListener('keyup', function(e) {
	            // console.log(e);
	            console.log('up:' + e.keyCode);
	            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
	            if (e.keyCode === 65) {
	                alert('您按下的a键');
	            } else {
	                alert('您没有按下a键')
	            }
	        })
	        document.addEventListener('keypress', function(e) {
	            // console.log(e);
	            console.log('press:' + e.keyCode);
	        })
	    </script>
	</body>
</html>

在这里插入图片描述

案例：模拟京东按键输入内容

按下s键，光标定位到搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<body>
	    <input type="text">
	    <script>
	        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
	        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
	        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
	        var search = document.querySelector('input');
	        document.addEventListener('keyup', function(e) {
	            // console.log(e.keyCode);
	            if (e.keyCode === 83) {
	                search.focus();
	            }
	        })
	    </script>
	</body>
</html>

在这里插入图片描述

案例：模拟京东快递单号查询

当我们在文本框输入内容时，文本框上面自动显示大字号的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.search {
			position: relative;
			width: 178px;
			margin: 100px;
		}
		.con {
			display: none;
			position: absolute;
			top: -40px;
			width: 171px;
			border: 1px solid rgba(0, 0, 0, .2);
			box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
			padding: 5px 0;
			font-size: 18px;
			line-height: 20px;
			color: #333;
		}
		.con::before {
			content: '';
			width: 0;
			height: 0;
			position: absolute;
			top: 28px;
			left: 18px;
			border: 8px solid #000;
			border-style: solid dashed dashed;
			border-color: #fff transparent transparent;
		}
	</style>
	<body>
	    <div class="search">
	        <div class="con">123</div>
	        <input type="text" placeholder="请输入您的快递单号" class="jd">
	    </div>
	    <script>
	        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
	        // 表单检测用户输入： 给表单添加键盘事件
	        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
	        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
	        var con = document.querySelector('.con');
	        var jd_input = document.querySelector('.jd');
	        jd_input.addEventListener('keyup', function() {
	                // console.log('输入内容啦');
	                if (this.value == '') {
	                    con.style.display = 'none';
	                } else {
	                    con.style.display = 'block';
	                    con.innerText = this.value;
	                }
	            })
	            // 当我们失去焦点，就隐藏这个con盒子
	        jd_input.addEventListener('blur', function() {
	                con.style.display = 'none';
	            })
	            // 当我们获得焦点，就显示这个con盒子
	        jd_input.addEventListener('focus', function() {
	            if (this.value !== '') {
	                con.style.display = 'block';
	            }
	        })
	    </script>
	</body>
</html>