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

整体代码实现要求效果：

<!-- /**
* 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作用。相关推荐

java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
用JS键盘事件来移动图片
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/4/18 小时候都玩过下水道修理工的游戏吧,那其实是一个很简单的小游戏,用简单的JS技术就可以实现,现在我来示范一下最简单 ...
JS键盘事件—onkeydown，onkeyup
键盘事件 onkeydown 按键被按下对于某个按键一直按着不放,则事件会一直触发当onkeydown连续触发式,第一次和第二次之间会有一个间隔时间,其他之后会非常的快这种设计是为了防止我们误操 ...
JS键盘事件(非常详细)
在JavaScript中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种 ...
HTML DOM 事件 —— 键盘事件 JS键盘事件
键盘事件如果想实现快捷的页面操作,或者是一些前端的游戏,了解键盘事件很重要: onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松 ...
JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...
js键盘事件中的键码对照表
JS中的键盘事件经常用到,收集了键盘事件对应的键码来分享下: keyCode 对应按键 8 BackSpace BackSpace 9 Tab Tab 12 Clear 13 Enter 16 S ...
JS 键盘事件、触摸事件
一.键盘事件:指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发功能键无法响应 keyup: 键盘抬起时触发注意: 1.keydown ke ...

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

JS键盘事件: onkeyup onkeypress onblur onfocus作用。相关推荐

最新文章

热门文章