JS键盘事件: onkeyup onkeypress onblur onfocus作用。

最新推荐文章于 2023-11-18 23:34:40 发布

红颜不简

最新推荐文章于 2023-11-18 23:34:40 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/YIC020920/article/details/127990989

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

查询快递单号的时候，想要在键盘输入然后在驿站大屏幕上展示出来。应该怎么做到呢？

@onkeyup @onkeypress @onblur @onfocus使用这四个事件操作试试咯！

1、按下键盘任意键并松开就可以触发onkeyup事件

/* @onkeyup 键盘松开触发 */
	num.onkeyup = function () {
		// alert("触发了")
		con.innerHTML = num.value;
	}

2、事件会在键盘按键被按下并释放一个键时发生。

/* @onkeypress 键盘按下触发 显示功能键 */
	num.onkeydown = function () {
		con.innerHTML = num.value;
	}

3、失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

/* @onblur 失去焦点之后将con和num.value隐藏 */
	num.onblur = function () {
		con.style.display = "none";
		data = num.value;
		num.value = " ";
	}

4、onfocus 事件在元素获得焦点时发生。

onfocus 事件最常与 <input>、<select> 和 <a> 一起使用。

/* @onfocus 获取焦点之后将con和隐藏在data里面的value值显示出来 */
	num.onfocus = function () {
		con.style.display = "block";
		num.value = data;
	}

整体代码实现要求效果：

<!-- /**
* YicStudio
* @Description描述:查询快递单号的时候，想要在键盘输入然后在驿站大屏幕上展示出来。
* @author编程者: 一冲子
* @date日期: 2022/11/22 21:20
* @Blog小猴子: https://blog.csdn.net/YIC020920/
* @Blog博客园: https://www.cnblogs.com/YICHONG-777/
*/ -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.search {
			position: relative;
			width: 178px;
			margin: 100px;
		}

		.con {
			position: absolute;
			top: -40px;
			width: 171px;
			border: 1px solid rgba(0, 0, 0, .2);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			padding: 5px 0;
			font-size: 18px;
			line-height: 20px;
			color: #333;
			display: none;
		}
	</style>
</head>

<body>
	<div class="search">
		<div class="con" id="con"></div>
		<label>
			快递单号:
			<input type="text" placeholder="请输入您的快递单号" class="num" id="num">
		</label>
	</div>
</body>
<script>
	var con = document.getElementById("con");
	var num = document.getElementById("num");
	var data = "";
	// var a = document.num;
	/* @onkeyup 键盘松开触发 */
	num.onkeyup = function () {
		// alert("触发了")
		con.innerHTML = num.value;
	}
	/* @onkeypress 键盘按下触发 显示功能键 */
	num.onkeydown = function () {
		con.innerHTML = num.value;
	}
	/* @onblur 失去焦点之后将con和num.value隐藏 */
	num.onblur = function () {
		con.style.display = "none";
		data = num.value;
		num.value = " ";
	}
	/* @onfocus 获取焦点之后将con和隐藏在data里面的value值显示出来 */
	num.onfocus = function () {
		con.style.display = "block";
		num.value = data;
	}

</script>

</html>

红颜不简

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS键盘事件: onkeyup onkeypress onblur onfocus作用。

onkeyup @onkeypress @onblur @onfocus使用这四个事件操作试试咯！查询快递单号的时候，想要在键盘输入然后在驿站大屏幕上展示出来。失焦事件（onblur）onblur事件与onfocus是相对事件，
复制链接

扫一扫

专栏目录