首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Event KeyDown/KeyPress/KeyUp如何获取按下按钮的名称?

Event KeyDown/KeyPress/KeyUp是JavaScript中的键盘事件,用于捕获用户按下、按住和释放键盘上的按键。要获取按下按钮的名称,可以使用事件对象的属性来实现。

在JavaScript中,可以通过事件对象的keyCode或者key属性来获取按下按钮的名称。

  1. keyCode属性:keyCode属性返回一个数字,代表按下按钮的键码值。可以使用键码值与键盘上的按键进行对应。例如,keyCode为65表示按下了字母键盘上的"A"键。

示例代码:

代码语言:txt
复制
document.addEventListener("keydown", function(event) {
  var keyCode = event.keyCode;
  console.log("按下的键码值为:" + keyCode);
});
  1. key属性:key属性返回一个字符串,代表按下按钮的名称。可以直接使用按键的名称进行判断和处理。例如,key为"A"表示按下了字母键盘上的"A"键。

示例代码:

代码语言:txt
复制
document.addEventListener("keydown", function(event) {
  var key = event.key;
  console.log("按下的按钮名称为:" + key);
});

需要注意的是,keyCode属性在一些浏览器中已经被废弃,推荐使用key属性来获取按下按钮的名称。

对于不同的按键事件,可以分别使用keydown、keypress和keyup来监听按键操作。keydown事件在按下按钮时触发,keypress事件在按住按钮时触发,keyup事件在释放按钮时触发。

推荐的腾讯云相关产品:腾讯云云函数(Serverless Cloud Function),它是一种无需管理服务器即可运行代码的计算服务,可以用于处理各种事件触发的函数逻辑。

腾讯云云函数产品介绍链接地址:https://cloud.tencent.com/product/scf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 事件对象

说明 0 表示没有按下按钮 1 表示主鼠标按钮(常规一般是鼠标左键) 2 表示次鼠标按钮(常规一般是鼠标右键) 3 表示同时按下了主、次鼠标按钮 4 表示按下了中间的鼠标按钮 5 表示同时按下了主鼠标按钮和中间的鼠标按钮...1.键码 在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。...keyCode和charCode区别如下:比如当按下“a键(重视是小写的字母)时, 在Firefox中会获得 keydown: keyCode is 65  charCode is 0 keyup:   ...而当按下shift键时,在Firefox中会获得 keydown:keyCode is 16  charCode is 0 keyup: keyCode is 16   charCode is 0 在...:不会获得任何的charCode值,因为按shift并没输入任何的字符,并且也不会触发keypress事务 PS:在keydown事务里面,事务包含了keyCode – 用户按下的按键的物理编码。

1.9K100

JQ事件和事件对象

键盘按下时触发的事件    2 keyup     键盘松开一瞬间触发的事件    3 keypress  键盘按下松开整个过程触发的事件 //keydown()和keypress区别    keydown...()按下任意键都会触发,但keypress()事件只在按下键盘中任意字符键(A-Z)时触发,功能键不会触发(如shift ctrl 等)     4 event.which 指示按下的哪个键 1...针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。            ...在mousedown、mouseup事件中,event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。...以下是主要的鼠标按钮映射代码对应表 Event.which属性值 对应的鼠标按钮 1 鼠标左健 2 鼠标中健(滚轮键) 3 鼠标右健       6 event.preventDefault()  阻止事件的默认行为

4.1K20
  • JQuery事件

    ()        -------键盘按下松开过程  keypress()        -------键盘按下触发  keyup ()            ------键盘松开触发 注意: .keypress...,keydown,keyup的区别:  1.keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;  2.keypress:在键盘上按下一个按键,并产生一个字符时发生...注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。  ...二.两种常用用法举例 案例1:获取按键代码或字符的ASCII码 $(window).keydown( function(event){ // 通过event.which可以拿到按键代码....: 通过event.data传递给事件处理函数的任意数据;  handler: 指定的事件处理函数; 举例: // 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围. var validKeys

    2.1K40

    jQuery键盘事件的应用【jQuery框架应用入门13】

    表5-4键盘按键事件 键盘事件 说 明 keydown 当键盘按下时第一个发生的事件,对所有按键有效 keypress 当键盘按下时第二个发生的事件,对中文和特殊按键无效 keyup 当键盘弹起时发生的事件...图5-14键盘按下效果 但是当输在文本框中输入中文时,发现keypress事件并没有被执行,如图5-15所示,只在console窗体中输出了keydown事件和keyup事件。...图5-15按下中文按键测试 在jQuery中,如果你要获取键盘输入的是什么按键,那么可以利用事件参数的which属性即可(event.which)。...现在在keydown和keypress事件中都增加一条代码console.log(event.which)用来在console窗体输出按键的结果,在输出前先保持大小写按键为小写字母模式,然后在文本框中输入小写字母...图5-16测试按下字母 总结现象得到,当开发人员要求获取键盘输入的按键大小写敏感或输入中文时,要特别注意对按键事件的筛选。

    18610

    keyup?onchange?

    二、keypress、keydown、keyup事件 用户按下键盘上的字符键(释放键盘上的键)时触发,任何可以获得焦点的元素都可以触发keypress事件,且按下任何能够影响文本显示的键时就会触发(例如回车键...content.addEventListener("keypress/keydown/keyup", function(e){ console.log("被触发了!!!")...“keydown”和“keypress”事件; 方法 字数统计准确性 是否可以控制个数 是否限制粘贴情况 keydown 不准确 可以 不完全可以 keypress 不准确 可以 不可以(不触发) keyup...准确 不可以 不可以 问题: (1)keypress和keydown是在键盘按下时触发,此时var numbers = this.value.length;长度为0,所以会导致统计时差一个字符。...(2)粘贴情况下,keydown一次性超过指定位数(140)无法控制,keypress不会被触发;而keyup已后知后觉!!

    2.7K31

    JS快速入门(二)

    按下任意按键,按住可连续触发 keypress 按下按键(包括字母,文字和 Enter)触发,按住可连续触发,不能监听一些特殊按键(ALT、CTRL、SHIFT、ESC、方向键等) keyup 释放任意按键...', function() { console.log('keydown', this.value) // 获取当前输入值 }) 使用时注意触发顺序(keydown->keypress->keyup...事件触发的键的值的字符代码,或者keydown 或 keyup 事件的键盘代码 字符代码:表示 ASCII 字符的数字 键盘代码:表示键盘上真实键的数字 方法 说明 charCode 返回 keypress...事件触发时按下的字符键的字符 Unicode 值,用于用于 keydown 或 keyup 时总是返回 0 key 返回按键的标识符(字母区分大小写)。...keypress,keyup,keydown 示例 // 以输入 a 为例,分别查看三种事件返回结果 var input = document.querySelector('input') input.addEventListener

    6.6K30

    浅谈JavaScript的事件(事件类型)

    DOM3级中定义了9个鼠标事件:click事件,用户单击鼠标左键触发的事件或者按下enter键触发;dbclick事件,用户双击鼠标左键的时候触发;mousedown事件,用户按下鼠标按钮时触发;mouseenter...键盘与文本事件   用户在使用键盘时会触发键盘事件,有3个事件:keydown事件,当用户按下键盘上任意键时触发,如果按住不放会重复触发此事件;keypress事件,当用户按下键盘上的字符键时触发,如果按住不放会重复触发此事件...用户按下键盘上的字符键时,首先会触发keydown事件,然后是keypress事件,最后触发keyup事件。...其中keydown和keypress是在文本框发生变化之前触发,keyup是在文本框变化之后触发。如果按下的是非字符集,则会触发keydown和keyup事件。   ...在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。

    1.8K50

    inputchangecompositionkeydown事件详解

    keydown事件在按下键盘按键后触发。 扩展阅读 详细介绍各个事件的不同。 input input是理想的文本内容变化监听事件,可以在内容改变后实时触发。...keydown 从按钮按下到弹起,会依次触发keydown、keypress、keyup事件。...其中keydown会在按下任意字符后触发,keyup会在按键弹起后触发(chrome下中/英切换按钮弹起不会触发keyup)。...keypress会在按下可显示内容(数字/字母/符号)后在keydown之后触发。shift | meta等不会产生实际内容的按钮不会触发keypress。...事件触发顺序 对于input[type="text"]当没有输入中文时,事件触发顺序为: keydown keypress beforeinput input keyup 失去焦点 change 当使用输入法输入

    2.4K10

    02-老马jQuery教程-jQuery事件处理

    keydown([[data],fn]) $('p').keydown(fn); 当键盘或按钮被按下时,发生 keydown 事件。...keyup([[data],fn]) $('p').keyup(fn); 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。...keypress([[data],fn]) $('p').keypress(fn); 当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。...当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。...event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined event.which 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

    2.7K80

    JavaScript——DOM事件高级

    键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘被按下时触发 但不识别功能键 keyup按键弹起时触发:...= function () { console.log('我被按了'); } 注意: 如果使用addEventListener不需要加on keypress是某个按键被按下时触发...三个事件执行顺序:keydown---keypress---keyup 键盘事件对象 键盘事件对象中的keyCode属性可以得到相应键的ASSCII码值 document.addEventListener...('keypress', function (e) { console.log('press:' + e.keyCode); }) keyup和keydown事件不区分字母大小写...a和A得到的都是65(a) keypress区分字母大小写,返回不同的ASCII值 我们可以利用ASCII码值来判断用户按下那个键 document.addEventListener(

    1.8K10

    原生 JS DOM 常用操作大全

    触发三次事件) keydown > keypress > keyup 其中 keydown 和 keypress 在文件框发生变化之前触发,然后是keyup事件则是在文件框发生变化之后触发当按下非字符键的执行顺序...(按下非字符, 触发二次事件) keydown > keyup 其中首先触发 keydown , 最后触发 keyup....注意:keydown 和 keypress 在文本框里面特点:先执行事件的处理程序 在将文字落入到文本框中, keyup 在文本框里面的特点:先将文字落入到文本框中在执行事件的处理程序 keydown...按下键盘上的任意键触发;按住不放,重复触发keypress按下键盘上的字符键触发;按住不放,重复触发,不识别功能键,如 箭头,ctrl,shift 等keyup释放键盘上的键时触发e.keyCode当用户按下按键时获取按键...ASCII 编码e.key获取当用户按下按键时的名称 滚动条事件 当出现滚动条时,向下滚动页面时,上面被隐藏掉的高度,被称为页面被卷去的部分,此时滚动条在滚动时会触发 scroll事件 element.addEventListener

    10810

    C1 能力认证——Web进阶

    ,按住可连续触发 keypress 按下按键(包括字母,文字和Enter)触发,按住可连续触发,不能监听一些特殊按键(ALT、CTRL、SHIFT、ESC、方向键等) keyup 释放任意按键 常用键盘事件属性...使用键盘事件属性可以精确的控制键盘操作,如:回车触发,方向键触发 名称 描述 keyCode keyCode属性返回keypress事件触发的键的值的字符代码,或者keydown或keyup事件的键盘代码...字符代码 - 表示ASCII字符的数字 键盘代码 - 表示键盘上真实键的数字 charCode 返回keypress事件触发时按下的字符键的字符Unicode值,用于keydown或keyup时总是返回...keypress,keyup,keydown返回值相同 实现点击按钮,弹出“已点击”提示,补全代码 var btn = document.querySelector('button'); btn.addEventListener...', function() { console.log('唐僧') }) keyup # 常用键盘事件执行顺序为:keydown->keypress->keyup 在input

    3.2K30

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    常用键盘事件 名称 描述 keydown 按下任意按键,按住可连续触发 keypress 按下按键(包括字母,文字和Enter)触发,按住可连续触发,不能监听一些特殊按键(ALT、CTRL、SHIFT、...常用键盘属性事件 名称 描述 keyCode keyCode属性返回keypress事件触发的键的值的字符代码,或者keydown或keyup事件的键盘代码。...字符代码 – 表示ASCII字符的数字 键盘代码 – 表示键盘上真实键的数字 charCode 返回keypress事件触发时按下的字符键的字符Unicode值,用于keydown或keyup时总是返回...keypress,keyup,keydown返回值相同 (1)实现点击按钮,弹出“已点击”提示,补全代码。...', function() { console.log('唐僧') }) 答案:keyup 常用键盘事件执行顺序为:keydown->keypress->keyup。

    2K20

    常用键盘事件

    'keyup', function() {            console.log('我弹起了');       }) ​        //3. keypress 按键按下的时候触发...console.log('我按下了press');       })        //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊        ...三个事件的执行顺序 keydown -- keypress -- keyup     2、 键盘事件对象 注意: 1) onkeydown 和 onkeyup 不区分字母大小写(...2)在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键 (包括功能键) 3) keypress 不识别功能键,但是 keypress 的 keyCode属性能区分大小写,返回不同的...{                alert('您没有按下a键')           }       })        document.addEventListener('keypress

    1.5K20
    领券