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

红颜不简

2024-04-29 帮助1人

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

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

这篇好文章是转载于：学新通技术网

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

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开