Web APIs：事件高级--键盘事件，京东按键输入及模拟京东快递单查询案例

晴雨相拥，同心逐梦

于 2022-10-22 09:32:29 发布

阅读量319

点赞数

分类专栏： JavaScript 文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/weixin_64612659/article/details/127096688

版权

JavaScript 专栏收录该内容

93 篇文章 1 订阅

订阅专栏

常用的键盘事件

keydown和keypress的区别是keypress不识别功能键例如ctrl,shift

执行顺序keydown>keypress>keyup

keyCode判断用户按下哪个键

keyCode 返回该键的ASCII码

注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

我按下了小a键，press返回了97,但是keyup不区分大小写，也会触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
			在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
			Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值 -->
	</body>
	<script>
		document.addEventListener('keyup',function(e){
			if(e.keyCode===65){
				alert('A')
			}else{
				alert('其他')
			}})
		document.addEventListener('keypress',function(e){
			console.log('press'+e.keyCode)
		}
		)
	</script>
</html>

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

当我们按下 s 键，光标就定位到搜索

① 核心思路：检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面

② 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键

③ 搜索框获得焦点：使用 js 里面的 focus(）方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<script>
			var search=document.querySelector('input');
			document.addEventListener('keyup',function(e){
				if(e.keyCode===83){
					search.focus();
				}
			})
		</script>
	</body>
</html>

这里用的是keyup，因为如果使用keydown或keypress会把s也给输入到文本框中，同时要注意的是给文档设置事件。

模拟京东快递单号查询

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

案例分析

① 快递单号输入内容时，上面的大号字体盒子（con）显示这里面的文字

② 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容

③ 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子

④ 注意： keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。

⑤ keyup事件触发的时候，文字已经落入文本框里面了

⑥ 当我们失去焦点，就隐藏这个con盒子 ⑦ 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

实现了效果，但是失去，获取焦点还没实现


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>

<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() {
               if(this.value==""){
				   con.style.display='none';
			   }else{
				   con.style.display='block';
				   con.innerHTML=this.value;
			   }
            })
    </script>
</body>

现在有个问题，我们为什么要用keyup而不是keydown

用keydown事件

这种效果是因为我们按下了这个键我们字还没有进去，就执行了这行代码

完整代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>

<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() {
               if(this.value==""){
				   con.style.display='none';
			   }else{
				   con.style.display='block';
				   con.innerHTML=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>

晴雨相拥，同心逐梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web APIs：事件高级--键盘事件，京东按键输入及模拟京东快递单查询案例

这里用的是keyup，因为如果使用keydown或keypress会把s也给输入到文本框中，同时要注意的是给文档设置事件。④ 注意： keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。⑥ 当我们失去焦点，就隐藏这个con盒子 ⑦ 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子。在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
复制链接

扫一扫