首页 > 编程语言 >JavaScript-键盘事件

JavaScript-键盘事件

时间:2023-11-17 20:01:04浏览次数:78  
标签:KeyboardEvent 返回 布尔值 Shift JavaScript 键盘 按下 事件

键盘事件的种类

键盘事件由用户击打键盘触发,主要有keydownkeypresskeyup三个事件,它们都继承了KeyboardEvent接口。

  • keydown:按下键盘时触发。
  • keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
  • keyup:松开键盘时触发该事件。

如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. ...(重复以上过程)
  6. keyup

KeyboardEvent 接口概述

KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口,并且定义了自己的实例属性和实例方法。

浏览器原生提供KeyboardEvent构造函数,用来新建键盘事件的实例。

new KeyboardEvent(type, options)

KeyboardEvent构造函数接受两个参数。第一个参数是字符串,表示事件类型;第二个参数是一个事件配置对象,该参数可选。除了Event接口提供的属性,还可以配置以下字段,它们都是可选。

  • key:字符串,当前按下的键,默认为空字符串。
  • code:字符串,表示当前按下的键的字符串形式,默认为空字符串。
  • location:整数,当前按下的键的位置,默认为0
  • ctrlKey:布尔值,是否按下 Ctrl 键,默认为false
  • shiftKey:布尔值,是否按下 Shift 键,默认为false
  • altKey:布尔值,是否按下 Alt 键,默认为false
  • metaKey:布尔值,是否按下 Meta 键,默认为false
  • repeat:布尔值,是否重复按键,默认为false

KeyboardEvent 的实例属性

KeyboardEvent.altKey,KeyboardEvent.ctrlKey,KeyboardEvent.metaKey,KeyboardEvent.shiftKey

以下属性都是只读属性,返回一个布尔值,表示是否按下对应的键。

  • KeyboardEvent.altKey:是否按下 Alt 键
  • KeyboardEvent.ctrlKey:是否按下 Ctrl 键
  • KeyboardEvent.metaKey:是否按下 meta 键(Mac 系统是一个四瓣的小花,Windows 系统是 windows 键)
  • KeyboardEvent.shiftKey:是否按下 Shift 键

下面是一个示例。

function showChar(e) {
  console.log('ALT: ' + e.altKey);
  console.log('CTRL: ' + e.ctrlKey);
  console.log('Meta: ' + e.metaKey);
  console.log('Shift: ' + e.shiftKey);
}

document.body.addEventListener('keydown', showChar, false);

KeyboardEvent.code

KeyboardEvent.code属性返回一个字符串,表示当前按下的键的字符串形式。该属性只读。

下面是一些常用键的字符串形式,其他键请查文档

  • 数字键0 - 9:返回digit0 - digit9
  • 字母键A - z:返回KeyA - KeyZ
  • 功能键F1 - F12:返回 F1 - F12
  • 方向键:返回ArrowDownArrowUpArrowLeftArrowRight
  • Alt 键:返回AltLeftAltRight
  • Shift 键:返回ShiftLeftShiftRight
  • Ctrl 键:返回ControlLeftControlRight

KeyboardEvent.key

KeyboardEvent.key属性返回一个字符串,表示按下的键名。该属性只读。

如果按下的键代表可打印字符,则返回这个字符,比如数字、字母。

如果按下的键代表不可打印的特殊字符,则返回预定义的键值,比如 Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,Esc,Spacebar,PageUp,PageDown,End,Home,Left,Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,NumLock,Scroll 等。

如果同时按下一个控制键和一个符号键,则返回符号键的键名。比如,按下 Ctrl + a,则返回a;按下 Shift + a,则返回大写的A

如果无法识别键名,返回字符串Unidentified

KeyboardEvent.location

KeyboardEvent.location属性返回一个整数,表示按下的键处在键盘的哪一个区域。它可能取以下值。

  • 0:处在键盘的主区域,或者无法判断处于哪一个区域。
  • 1:处在键盘的左侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
  • 2:处在键盘的右侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
  • 3:处在数字小键盘。

KeyboardEvent.repeat

KeyboardEvent.repeat返回一个布尔值,代表该键是否被按着不放,以便判断是否重复这个键,即浏览器会持续触发keydownkeypress事件,直到用户松开手为止。

KeyboardEvent 的实例方法

KeyboardEvent.getModifierState()

KeyboardEvent.getModifierState()方法返回一个布尔值,表示是否按下或激活指定的功能键。它的常用参数如下。

  • Alt:Alt 键
  • CapsLock:大写锁定键
  • Control:Ctrl 键
  • Meta:Meta 键
  • NumLock:数字键盘开关键
  • Shift:Shift 键
if (
  event.getModifierState('Control') +
  event.getModifierState('Alt') +
  event.getModifierState('Meta') > 1
) {
  return;
}

上面代码表示,只要ControlAltMeta里面,同时按下任意两个或两个以上的键就返回。

标签:KeyboardEvent,返回,布尔值,Shift,JavaScript,键盘,按下,事件
From: https://blog.51cto.com/u_10538247/8453405

相关文章

  • javascript 自定义分页组件
    仿boostrap前端分页组件的实现一 写一个前端自定义分页组件,需要考虑以下问题  /*     需要一个<ul id="pagination"></ul>标签   total; // 总数据的数量   pageSize; // 一页显示数量   pageIndex; // 当前页   */ 二实现细节编写html......
  • (javascript)将ztree树结构的数据转成二维数组
    ztree树结构的数据结构如下:[{"id":3990,"name":"泡沫灭火","iconShow":false,"children":[{"id":8616,......
  • JavaScript之splice()
    参考:https://blog.csdn.net/weixin_45726044/article/details/120151153概述splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。一个参数splice(index)——>从index的位置开始,删除之后的所有元素(包括......
  • 在React 中如何处理事件?
    在React中处理事件有几种常见的方式,具体取决于你使用的是类组件还是函数组件。一:类组件中处理事件:在类组件中,可以通过在JSX中使用内联函数或在类中定义事件处理方法来处理事件。1:内联函数:在JSX中直接使用内联函数处理事件。例如,使用onClick处理点击事件:classMyComponente......
  • javascript postMessage给子页面发消息
    发送消息页面<!DOCTYPEhtml><html><head><title>demo</title><metacharset="utf-8"/><script>varchildwinconstchildname="popup"functionopenChild(){......
  • js给多个具有相同class的元素绑定同一个事件或者样式
    <buttonclass="btn1">month1</button><buttonclass="btn1">month2</button><buttonclass="btn1">month3</button>若要给上面3个都具有btn1的class的按钮,添加同样的点击事件,则如下操作:$(".btn1").each(function(){......
  • 11.16 基本完成个人任务管理系统项目后重新复习JavaScript高级程序设计——声明var与l
    我看的是js高级程序设计第四版,前两章快速了解了一下,第三章开始慢啃,虽然内容枯燥,很多东西自己也知道了,但还是有一些收获的。比如,声明变量的三个关键词:var、let、const;var以前经常用但是会出问题,相比let没有那么严谨(var声明范围函数作用域,而let声明范围块级作用域)。看个例子:这是v......
  • 【分享】javascript汉字转拼音库pinyin-pro
    ......
  • 鼠标拖拽拖动盒子时,与盒子内某些点击事件冲突问题解决
    问题:拖动时会触发圆球的点击事件解决鼠标拖动盒子时,将moving设为true意为正在拖动盒子,此时将class="move"遮挡容器展示在悬浮球上层,以覆盖悬浮球,此时也就不存在触发悬浮球点击事件的冲突了;鼠标拖动完盒子弹起时再将 moving设为false意为不在拖动盒子(遮挡容器class=......
  • JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧
    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示:一.onload事件通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下......