JavaScript键盘事件五大经典案例

1、什么是键盘事件

键盘事件就是我们对键盘的操作触发绑定元素对象的相关函数，比如敲击键盘上的某个键，按住键盘上的某个键，按组合快捷键后元素做出的函数行为……等这些都是键盘事件的体现。

2、常用键盘事件

事件	说明
onkeydown	当按下某个键时触发的事件
onkeypress	当按下某个键时触发的事件(不识别功能键，如ctrl、shift…等)
onkeyup	当按下某个键松开是触发的事件

注意：

如果使用监听添加事件的方式，则不需要添加on

元素对象.addEventListener("事件类型(不加on)"，function(e){});

onkeypress与onkeyup和onkeydown最大的区别就在于不能识别功能键
keydown和keyup的事件对象是相同的，事件都不区分字母大小写(默认大写)，keypress则会区分大小写
如果一个元素分别绑定了这个三个事件，则触发的顺序为：keydown=》keypress=》keyup
在实际开发中，使用更多的是keydown和keyup，因为它门能够识别键盘上的所有键

3、常用属性和方法

keyCode

该属性可以识别大小写，并返回其对应的ASCII值，一般我们使用该属性来判断用户的按键操作
e.preventDefault()

该方法阻止默认事件（标准）
e.stopPropagation()

该属性阻止事件冒泡
return false

既阻止默认事件的触发，又阻止事件冒泡

4、案例

4.1 京东搜索框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东搜索框</title><style>input {display: block;width: 300px;height: 25px;border: 2px solid #e2231a;background-color: #ffffff;margin: 100px auto;}</style>
</head><body><input type="text" placeholder="金典京东超级宠粉日，抢199键100券"><script>window.onload = function() {// 获取文本输入框var tBox = document.querySelector("input");// 给文档对象添加键盘按钮弹起的事件document.addEventListener("keyup", function(e) {// 如果按下的键是s键if (e.keyCode == 83) {// 文本输入框获取焦点tBox.focus()}})}</script>
</body></html>

4.2 快递单号输入查询

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快递单号输入查询</title><style>.box {width: 250px;margin: 100px auto;position: relative;}.poput {width: 160px;padding: 5px 5px;line-height: 20px;font-size: 12px;background-color: #f1f1f1;box-shadow: 0 2px 10px rgba(0, 0, 0, .5);position: absolute;left: 80px;top: 2px;display: none;}.poput::before {content: "";width: 0;height: 0;border: 7px solid red;border-color: #f1f1f1 transparent transparent;position: absolute;top: 30px;left: 20px;}.lastBox {margin-top: 15px;}</style>
</head><body><div class="box"><div>公司名称：<input type="text" placeholder="圆通快递" disabled="disabled"></div><div class="poput">123</div><div class="lastBox">快递单号：<input type="text" id="text"></div></div><script>window.onload = function() {// 获取文本输入框var text = document.querySelector("#text");// 获取弹出框var poput = document.querySelector(".poput");// 给文本框添加键盘按键弹起事件text.addEventListener("keyup", function(e) {// 判断文本输入框是否为空if (this.value == "") {// 为空弹框就隐藏poput.style["display"] = "none";} else {// 否则弹框出现，并且将文本输入框内的值赋值给弹出框poput.style["display"] = "block";poput.innerText = this.value;}})// 给文本输入框添加失去鼠标焦点时的事件text.addEventListener("blur", function() {// 失去焦点后，弹框隐藏poput.style["display"] = "none";})//给文本输入框添加鼠标获取焦点时的事件text.addEventListener("focus", function() {// 判断文本输入框是否为空if (this.value == "") {// 为空弹框就隐藏poput.style["display"] = "none";} else {// 否则弹框出现，并且将文本输入框内的值赋值给弹出框poput.style["display"] = "block";poput.innerText = this.value;}})}</script>
</body></html>

4.3 文字禁止选中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js事件实现文字禁止选中功能</title><style>p {text-indent: 2em;}</style>
</head><body><p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p><script>// onselectstart 禁止选中事件//触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）var p = document.querySelector("p");p.addEventListener("mouseover", function(e) {console.log(e.target);/* user-select 是css3新增的属性，用于设置用户是否能够选中文本。可用于除替换元素外的所有元素取值：[none]：文本不能被选中[text]：可以选择文本（默认）[all]：当所有内容作为一个整体时可以被选中。如果双击或者在上下文上点击子元素，那么被选中的选择的部分将是以该子元素向上回溯的最高祖先元素[Element]：可以选择文本，但选择范围受元素边界的约束*/e.target.style["userSelect"] = " none";})</script>
</body></html>

4.4 禁止右击菜单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现一个标签禁止右键菜单功能</title></head><body><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现一个标签禁止右键菜单功能</title><style>p {text-indent: 2em;}</style></head><body><p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p><script>var p = document.querySelector("p");/* oncontextmenu:该事件在元素中用户右击鼠标时触发并打开上下文菜单*/p.addEventListener("contextmenu", function(e) {//returnValue：取消事件的默认动作（非标准）e.returnValue = false;// preventDefault()：或者取消事件的默认动作（标准）e.preventDefault();})</script></body></html><p></p><script>window.onload = function() {}</script>
</body></html>

4.5 自定义鼠标光标

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片替换光标功能</title><style></style>
</head><body><div></div><script>window.onload = function() {document.addEventListener("mouseover", function(e) {// [cursor]：该属性规定要显示的光标类型(形状)// 该属性规定鼠标指针放在元素边界范围内时所有的光标形状e.target.style["cursor"] = "url(./images/鼠标光标.png),auto";})}</script>
</body></html>

JavaScript键盘事件经典案例相关推荐

JavaScript键盘事件常见用法实例分析
JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放 ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
JavaScript键盘事件及案列
在网页设计过程中键盘事件的作用非常的强大,也是经常使用的一个事件键盘事件有三个: Keydown当按钮被按下时,发生 keydown 事件. 2.Keypress事件与 keydown 事件类似.当 ...
JavaScript鼠标事件及案例
目录一.鼠标事件 1.鼠标事件的常用方法 (1)鼠标事件常用方法 (2) 禁止鼠标右击菜单:contextmenu (3)禁止鼠标选中:selectstart 2.鼠标事件对象 3.案例(图片随着鼠 ...
Javascript 键盘事件
经常在做网页中遇到这样的问题,就是按下enter后,表单自动提交.这个功能如何实现呢? 我翻了一下,发现基本上都是用js实现的. 如下: <script type="text/java ...
JavaScript基础部分经典案例
再复杂的程序都是由一个个简单的部分组成. 001案例 - 交换两个变量的值方法01 - 使用临时变量 var n1 = 5;var n2 = 6;// 创建一个临时中介变量 tmpvar tmp;/ ...
JavaScript闭包之经典案例
①函数作为返回值 [1]例子1 function a() {var name='dov';return function(){return name;}}var b=a();console.log(b ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

JavaScript键盘事件经典案例

JavaScript键盘事件五大经典案例

目录：

1、什么是键盘事件

2、常用键盘事件

3、常用属性和方法

4、案例

4.1 京东搜索框

4.2 快递单号输入查询

4.3 文字禁止选中

4.4 禁止右击菜单

4.5 自定义鼠标光标

JavaScript键盘事件经典案例相关推荐

最新文章

热门文章