JavaScript 键盘事件的处理及属性详解

目录
  • 引言
    • 处理键盘事件
    • 键盘事件属性

引言

JavaScript 中的事件,当用户或浏览器尝试操作页面时,就会发生事件来处理 JavaScript 与HTML的交互。正如大家所知,JavaScript 与HTML一起工作,因此,页面加载、单击按钮、最小化窗口、单击鼠标、敲打键盘等发生的一切都是事件。就像在单击按钮时向用户显示任何消息一样,这是通过事件发生的。

所有HTML元素(如按钮、文本框、图像)都可以包含可以使用 JavaScript 代码触发的事件。所有这些事件都是DOM的一部分(文档对象模型)。在这里,将简单介绍一下键盘事件。

键盘事件对象描述了用户与键盘的交互,每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydownkeypresskeyup 用于识别不同的键盘活动类型。

  • keydown:当按下键盘上的某个键时触发,并在按住该键时重复触发。
  • keyup:当释放键盘上的键时触发。
  • keypress:当按下 abc 之类的字符键盘时触发,而不是左箭头键、home 或结束键盘,... 当按住键盘上的键时,按键也会重复触发。

处理键盘事件

要处理键盘事件,需要执行以下步骤:

  • 首先,选择将触发键盘事件的元素,通常是表单元素。
  • 然后,使用 element.addEventListener() 来注册事件处理程序。

假设有以下带有 id 的文本框 message

<input type="text" id="message">

添加事件的代码如下:

let msg = document.getDocumentById('message');
msg.addEventListener("keydown", (event) => {
    // 事件处理逻辑
});
msg.addEventListener("keypress", (event) => {
    // 事件处理逻辑
});
msg.addEventListener("keyup", (event) => {
    // 事件处理逻辑
});

键盘事件属性

键盘事件有两个重要的属性:keycodekey 属性返回已按下的字符,而 code 属性返回物理键码。

下面主要简单说明一下JavaScript代码部分。

首先,将 DOM 元素赋值给变量以便通过 JavaScript 操作这些元素。

const events = document.querySelector(".event");
const keyEvent = document.querySelector(".event-key .event-value");
const keyCodeEvent = document.querySelector(".event-keyCode .event-value");
const CodeEvent = document.querySelector(".event-code .event-value");
const whichEvent = document.querySelector(".event-which .event-value");
const shiftKey = document.querySelector(".key-shift .key-status");
const ctrlKey = document.querySelector(".key-ctrl .key-status");
const altKey = document.querySelector(".key-alt .key-status");

querySelectorquerySelectorAll 基本上是使用 className 来获取 Html 元素。它们可用于通过类、ID或标签来获取元素。querySelectorquerySelectorAll 之间的基本区别是 querySelectorAll 将返回具有相同类的 NodeList,而 querySelector 将获取该类的单个元素。如果有多个具有相同类或标签的元素,那么它只会获取第一个元素。

下面添加事件到相应的DOM元素:

function keyboardEvents(e) {
    e.preventDefault();
    activeKey(e);
    if (e.key === " ") {
        keyEvent.style.fontStyle = "italic";
        keyEvent.textContent = "(space)";
    } else {
        keyEvent.textContent = e.key;
        keyEvent.style.fontStyle = "normal";
    }
    keyCodeEvent.textContent = e.keyCode;
    CodeEvent.textContent = e.code;
    whichEvent.textContent = e.which;
}

keyboardEvents 接受一个参数,即 eevent ,该参数将是包含事件的所有属性的对象。

  • e.preventDefault() 将阻止浏览器的默认行为,·例如:按功能键。
  • 从 DOM 获取的所有元素都有一些属性,textContent 就是其中之一,它将更新元素的内容。
  • e 有一些属性,e.keyCodee.key 是附加到键盘事件的属性之一,而其他事件如 clickdblclickchange等将包含不同的属性。
  • 将事件监听器附加到 window,这个是全局元素,事件将委托到 window 下的所有元素。
  • 当按下/按下键盘键时,将触发 keydown 事件。

现在将处理特殊键,如 ShiftCtrlAlt

function specialKeys(e) {
    shiftKey.textContent = e.shiftKey;
    ctrlKey.textContent = e.ctrlKey;
    altKey.textContent = e.altKey;
}

e.shiftKeye.ctrlKeye.altKey 将分别根据是否按下键返回布尔值 truefalse。并且此函数分配给两个事件侦听器,因为在按下键时,它将更新值,并且在按下键时,它将返回 false

以上就是JavaScript 键盘事件的处理及属性详解的详细内容,更多关于JavaScript 键盘事件的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript监听键盘事件代码实现

    在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式 键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号! keydown事件类型.该类型触发条件为按键按下去. //长按可以触发多次 document.addEvent

  • JS实现电脑虚拟键盘的操作

    本文实例为大家分享了JS实现电脑虚拟键盘的具体代码,供大家参考,具体内容如下 需求: 1.当输入框光标聚焦时,电脑虚拟键盘弹出 2.在输入框输入内容时,键盘跟着变化 具体实现代码如下: Html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

  • javascript利用键盘控制小方块的移动

    本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码.对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码.虚拟键盘码可能和使用的键盘的布局相关. 因此我们可以根据keycode返回的字符码来判断用户所

  • JS实现可以用键盘方向键控制的动画

    用JS写一个可以用键盘方向键控制的动画: 效果如下: 好了,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

  • 利用JavaScript实现创建虚拟键盘的示例代码

    目录 前言 项目基本结构 JavaScript 虚拟键盘的显示 虚拟键盘的按钮 CSS的键盘按钮设计 使用 JavaScript 激活虚拟键盘 前言 在线演示地址 项目基本结构 目录结构如下: 这是一个简单的 JavaScript 教程,教你如何创建JavaScript 虚拟键盘.虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘. 首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器.此虚拟

  • JavaScript如何实现监听键盘输入和鼠标监点击

    实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结. Keyboard​Event KeyboardEvent 对象描述了键盘的交互方式. 每个事件都描述了一个按键(Each event describes a key):事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动. KeyboardEvent 表示刚刚发生在按键上的事情. 当你需要处理文本输入的时候,使用 HTML5 input 事件代替.例如,用户使用手持系统如平板

  • JavaScript对Json的增删改属性详解

    使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码: <script type="text/javascript"> var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 json["age"] = 30; alert(

  • JavaScript键盘事件常见用法实例分析

    本文实例讲述了JavaScript键盘事件常见用法.分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键. keyup 键盘按键弹起,可以捕获组合键. 全局事件对象event event.ctrlKey 功能键"ctrl"键是否按下. event.altKey 功能键&qu

  • JavaScript精炼之构造函数 Constructor及Constructor属性详解

    除了创建对象,构造函数(constructor) 还做了另一件有用的事情-自动为创建的新对象设置了原型对象(prototype object) .原型对象存放于 ConstructorFunction.prototype 属性中. 例如,我们重写之前例子,使用构造函数创建对象"b"和"c",那么对象"a"则扮演了"Foo.prototype"这个角色: // 构造函数 function Foo(y) { // 构造函数将会以特

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

  • JavaScript中闭包的写法和作用详解

    1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变

  • JavaScript实现拖拽排序的方法详解

    目录 实现原理概述 代码实现 完整代码实现 可拖拽排序的菜单效果大家想必都很熟悉,本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理. 先看一下完成效果: 实现原理概述 拖拽原理 当鼠标在[可拖拽小方块](以下简称砖头)身上按下时,开始监听鼠标移动事件 鼠标事件移动到什么位置,砖头就跟到什么位置 鼠标抬起时,取消鼠标移动事件的监听 排序原理 提前定义好9大坑位的位置(相对外层盒子的left和top) 将9大砖头丢入一个数组,以便后期通过splice方法随意安插和更改砖头的位置 当拖动某块砖头

  • JavaScript 中有关数组对象的方法(详解)

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

  • JavaScript中关键字 in 的使用方法详解

    for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q

  • Javascript之图片的延迟加载的实例详解

    Javascript之图片的延迟加载的实例详解 作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了) 原理: 1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片 2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面

  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

随机推荐

其他