上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]键盘事件的监听

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2022-1-24 20:01:38 | 显示全部楼层 | 阅读模式

    键盘监听

    我们可以在实现网页的功能的时候,如果不想做界面,或者做一些需求的时候,可以使用键盘监听,这样不仅你可以更好的完成自己开发的需求,在一些特定的情况下,我们也可以事件代码的复用,来来回回批量生成jio本

    键盘事件类型

    通常键盘事件分为三种

    keydown

    keypress

    keyup

    我们先一个一个来了解

    keydown

    keydown的触发时机是在键盘按键按下的时候

    所有的按键都会触发keydown事件,无论按键是否产生字符值(ctrl等功能键不产生字符)

    使用实例

    const input = document.querySelector('input');
    const log = document.getElementById('log');
    
    input.addEventListener('keydown', logKey);
    
    function logKey(e) {
      log.textContent += ` ${e.code}`;
    }

    Tips

    自Firefox 65起,keydown与keyup事件会在ime输入中文的时候被触发,如果需要忽略输入过程中的keydown事件,可以按照如下代码修改

    中文输入在keydown阶段keycode为229

    而isComposing代表正在输入状态

    eventTarget.addEventListener("keydown", event => {
      if (event.isComposing || event.keyCode === 229) {
        return;
      }
      // do something
    });

    Keypress

    mdn宣称此事件已被弃用,不在推荐使用此功能,尽管某些浏览器仍然支持,但可能随时停止工作

    所以我们这里不在赘述

    可以使用keydown代替

    keypress通常是在产生字符值的时候触发事件

    产生字符值的有字母,数字,标点等按键,不产生字符的如alt,shift,ctrl等,则不会触发该事件

    注意,此事件已被废弃

    Keyup

    keyup为按键松开的时候触发,keydown与key事件共同提供哪个键是被按下的代码

    而Keypress则代表哪个字符被输入

    例如小写字母a在keydown和keyup都为65,但是在keypress是指哪些字符被输入,并非小写a,而为大写A

    Tips

    Keyup与keydown相同,在输入法的时输入的时候被触发,如果要忽略输入过程中,请参考上方代码

    使用示例

    const input = document.querySelector('input');
    const log = document.getElementById('log');
    
    input.addEventListener('keyup', logKey);
    
    function logKey(e) {
      log.textContent += ` ${e.code}`;
    }

    结语

    那么这节课我们就简单学习了键盘按键的相关内容

    我们不仅可以使用addeventlistener做监听,也可以直接onxxx的形式对某个元素进行设置监听

    但是更推荐addeventlistener哦

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    郁闷
    前天 13:15
  • 签到天数: 120 天

    [LV.7]常住居民III

    41

    主题

    355

    帖子

    1705

    积分

    荣誉开发者

    累计点滴改进,迈向完美品质。

    Rank: 10Rank: 10Rank: 10

    积分
    1705

    活跃会员三好学生中秋纪念章国庆纪念章热心会员推广达人宣传达人突出贡献猫咪币纪念章

    发表于 2022-1-24 20:14:57 | 显示全部楼层

    获取按下键盘按键对应的键值方法👇
    1. window.addEventListener('keydown' , (e) => {
    2.     console.log(e.keyCode);
    3. })
    4. //or
    5. window.onkeydown = (e) => {
    6.     console.log(e.keyCode);
    7. }
    复制代码


    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2022-4-3 20:13
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    5

    主题

    47

    帖子

    126

    积分

    初级工程师

    Rank: 4

    积分
    126
    发表于 2022-1-25 18:00:48 | 显示全部楼层
    ggnb 学习了
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表