JS键盘事件: onkeyup onkeypress onblur onfocus作用。-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS键盘事件: onkeyup onkeypress onblur onfocus作用。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

@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;
	}

整体代码实现要求效果：文章来源地址https://www.toymoban.com/news/detail-517996.html

<!-- /**
* 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>

到了这里，关于JS键盘事件: onkeyup onkeypress onblur onfocus作用。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！