键盘事件keypress 和 keydown、keyup 的用法与区别

2023-11-13

  • KeyDown:用户摁下摁键时发生
  • KeyPress:用户摁下摁键,并且产生一个字符时发生
  • KeyUp: 用户释放某一个摁键时触发

定义和用法

完整的 keypress 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当按钮被按下时,发生 keydown 事件。
keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。


    <html>  
    <head>  
    <script type="text/javascript" src="/jquery/jquery.js"></script>  
    <script type="text/javascript">  
    $(document).ready(function(){  
      $("input").keydown(function(){  
        $("input").css("background-color","#FFFFCC");  
      });  
      $("input").keyup(function(){  
        $("input").css("background-color","#D6D6FF");  
      });  
    });  
    </script>  
    </head>  
    <body>  
    Enter your name: <input type="text" />  
    <p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>  
    </body>  
    </html>  

keyup 是在用户将按键抬起的时候才会触发的,属于整个按键过程中的最后阶段,所以有其特定的用处,就是在左侧输入,右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。

 <html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>无标题页</title>  

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>  

    <script type="text/javascript">  
        $(function() {  
            $('#t1').live('keyup', function() {  
                $('#v1').text($(this).val());  
            });  
            $('#t2').live('keydown', function() {  
                $('#v2').text($(this).val());  
            });  
            $('#t3').live('keypress', function() {  
                $('#v3').text($(this).val());  
            });  
        });      
    </script>  

</head>  
<body>  
    <textarea id="t1"></textarea>  
    <div id="v1">  
    </div>  
    <textarea id="t2"></textarea>  
    <div id="v2">  
    </div>  
    <textarea id="t3"></textarea>  
    <div id="v3">  
    </div>  
</body>  
</html>

这里分别用 keydown 、keyup、keypress做了实验,其中只有 keyup可以完整的将输入内容同步获取到,keydown和keypress总是无法获取到最后一个字符,这说明了三者之间的区别:
keydown 总是在摁键摁下的当时触发,不能得到最后的输入结果,keypress也是一样

这是因为keydown操作后,事件触发了,但值还未显示在文本框中,所以这类操作要用 keyup 一个完整的按键动作后,才可以获取文本框的值。

keydown与keypress更适用于通过键盘控制页面类功能的实现。

获取键盘点击的键位:

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("input").keydown(function(event){   
    $("div").html("Key: " + event.which);  
  });  
});  
</script>  
</head>  
<body>  

请随意键入一些字符:<input type="text" />  
<p>当您在上面的框中键入文本时,下面的 div 会显示键位序号。</p>  
<div />  

</body>  
</html>  

windows 窗体通过引发键盘事件来处理键盘入以响应 windows 消息,大多数 windows 窗体应用程序都通过处理键盘事件以独占方式处理键盘输入。

按键的类型

windows 窗体将键盘输入标识为:由按位 keys 枚举表示的虚拟键代码。

使用 keys 枚举,可以综合一系列按键以生成单个值,这些值与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应。通过处理 keydown 或 keyup 事件可以检测大多数的恶物理按键操作。字符键是 keys 枚举的子集,它们与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应,如果通过组合按键得到一个字符,则可以处理 keypress 事件来检测该字符。

键盘事件的顺序

  • 用户按 “a”键:则该键将被预处理和调度,而且会发生 keydown 事件
  • 用户按住 “a”键:则该键将被预处理和调度,而且会发生 keypress 事件
  • 用户松开 “a”键:则该键将被预处理和调度,而且会发生 keyup事件

3.键的预处理

像其他消息一样,键盘消息是在窗体或控件的 WindProc 方法中处理的,窗体或控件在处理键盘消息之前 PreProcessMessage 方法会调用一个或多个方法,这些方法可以被重写以处理特殊的字符键和物理按键。

keydown 触发后不一定触发 keyup 当 keydown按下后拖动鼠标,那么将不会触发 keyup事件

  • 4 用法区别:

    • 系统由 keydown 返回键盘的代码 后再由 translateMessage 函数翻译成字符,然后在由 keypress 返回键盘的字符值(Ascall 字符)。

      所以,在使用时应根据你的目的,选择性的使用:

      如果你只想读取字符用 keypress;如果想读取各键盘的状态用 keydown

      • keydown: 用户再键盘上按下某按键时触发,一直按着某按键则会不断触发(opera浏览器除外);
      • keypress:用户按下一个按键,并产生一个字符时触发(也就是不管类似 shift、alt、ctrl之类的键只要用户按了一个能在屏幕上输出字符的按键 keypress 事件才会触发)一直按着某键则会不断触发

      • keypress主要用来捕获数字(注意:包括 shift+数字符号)、字母(注意:包括大小写)、小键盘除了F1-12、shift、Alt、Ctrl、insert、home、pgup、delete、end、pgdn、scrolllock、pause、numlock、菜单键、开始键、和方向键外的ANSI字符

      • keydown和keyup通常可以捕获除了 prscrn 所有键(这里不讨论特殊键盘的特殊键)

      • keydown和keyup对于单个字符捕获的 keyvalue 都是一个值,也就是不能判断单个字符的大小写

      • keypress 不区分小键盘和主键盘的数字字符

      • keydown 和 keyup 区分小键盘和主键盘的数字字符

      • 其中 prscrn按键和 keypress 、keydown 和 keyup 都不能捕获

  • 5.系统组合键的判定

    在使用键盘的时候通常会用到 Ctrl+shift+alt 类似的组合键功能,通过 keyup 事件能够处理(说明一下这里不用keydown事件:因为在判定keydown 的时候,ctrl、shift、和Alt属于一直按下状态然后再加另外一个键是不能准确捕获组合键,所以使用keydown 是不能准确判断的,要通过keyup事件来判定)

  • 6.捕获PreScrn按键事件

    通过一种钩子的方式可以判定PrScrn 按键事件,钩子可以获取任何键盘事件

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

键盘事件keypress 和 keydown、keyup 的用法与区别 的相关文章

随机推荐

  • ROS下使用乐视RGB-D深度相机/Orbbec Astra Pro显示图像和点云

    ROS下使用乐视RGB D深度相机显示图像和点云 1 正常安装 1 1 安装依赖 1 2 建立工作空间 1 3 克隆代码 1 4 Create astra udev rule 1 5 编译源码包 1 6 修改astrapro launch
  • C++(9)——引用计数实现写时拷贝(包含String类的实现)

    在之前的学习中 我们谈到了字符串的深拷贝与浅拷贝 在浅拷贝中 由于多个对象共用同一块内存空间 导致同一块空间被释放多次而出现问题 那能否保证 当多个对象共享一块空间时 该空间最终只释放一次呢 这就是我们接下来要谈的问题 使用浅拷贝不浪费内存
  • 快速排序之“采取“尾递归”和“三数取中”技术的快速排序”

    快速排序之 采取 尾递归 和 三数取中 技术的快速排序 下面针对快速排序进行一些优化 QUICKSORT算法包含两个对其自身的递归调用 即调用PARTITION后 左边的子数组和右边的子数组分别被递归排序 QUICKSORT中的第二次递归调
  • 微信创建公众号菜单

    1 地址 https mp weixin qq com debug cgi bin apiinfo t index type E8 87 AA E5 AE 9A E4 B9 89 E8 8F 9C E5 8D 95 form E8 87 A
  • Android星级评分条控件RatingBar

    Android开发中 时不时的就有要实现星星的评分效果 比如某宝 某团 相信大家也都见过 当然了我们可以自己去画 也可以用美工给切的图去实现 其实在Android原生的控件中就可以来实现这样的效果 它就是RatingBar 来 我们先看一张
  • JMX获取tomcat监控信息

    最近用JAVA写了个获取tomcat信息资源的代码 随便保存一下 大致的步骤全在这了 可以获取到任何想要的指标 首先可以用JDK提供的工具jconsole来供我们查看 这个在服务端配置下catalina bat文件 加入以下内容 Linux
  • 陀螺研究院院长余维仁:区块链赋能供应链金融,助力供应链产业升级

    2020年9月24日晚7点30分四川省区块链行业协会 BSI大应用 小故事 栏目第十一期准时开播 协会邀请到陀螺研究院院长 深圳市信息服务业区块链协会副会长余维仁对八部委联合发布的供应链金融框架文件进行了解读 并阐释了区块链如何赋能供应链金
  • ValueError: Found array with dim 4. Estimator expected和ValueError: Expected 2D array, got 1D array i

    python3中对numpy数组进行降维或升维 解决报错如 1 ValueError Found array with dim 4 Estimator expected 2 ValueError Expected 2D array got
  • Red Hat 服务配置实验day02

    day02 1 再配置两台相同环境的 分别取名为client1 client2 细节不说了 克隆不克隆随你 mac别一样就行 2 配置网卡 sever client1 client2 配置相同的虚拟网卡 别选0 1 8 这三个一般别的nat
  • AssetBundle(五) 关于SceneManager.LoadScene的误解

    上篇 AssetBundle 四 Tolua对接 下篇 AssetBundle 六 关于PC下用Assetbundle材质丢失的问题解决 SceneManager LoadScene 是Unity内置的场景加载接口 在UnityEngine
  • 2023华为OD机试真题-基站维修工程师(JAVA、Python、C++)

    题目描述 小王是一名基站维护工程师 负责某区域的基站维护 某地方有n个基站 1
  • 基于卷积的图像分类识别(六):DenseNet & FractalNet

    系列文章目录 本专栏介绍基于深度学习进行图像识别的经典和前沿模型 将持续更新 包括不仅限于 AlexNet ZFNet VGG GoogLeNet ResNet DenseNet SENet MobileNet ShuffleNet Eif
  • 注册Github账号详细教程【超详细篇--适合新手入门】

    目录 一 GitHub的简介 二 如何注册自己的GitHub账户 1 进入github的官网 2 点击右上角注册按钮sign up 来到注册页面 4 点击Continue 继续在光标处创建密码 继续创建用户名 5 进行相应的验证 点击 cr
  • JAVA2实用教程(第5版)第五章

    第5章 子类与继承 5 1子类与父类 子类只能有一个父类 5 2子类的继承 1 继承 先定义一个共有属性的一般类 父类 超类 再以此来定义具有特殊属性的子类 java不支持多重继承 2 定义子类 class 子类名 extends 父类名
  • 微信小程序添加底部导航栏+实现点击跳转代码书写

    类比大麦网的底部导航栏作为案例来书写流程 建立如下文件夹 标红为底部导航栏的导航文件夹 某些需要新建 在app json中添加如下代码 整体代码为 pages pages index index pages scene scene page
  • Linux 内核模块查看命令

    ldd命令 显示应用程序 二进制程序 所依赖的库文件 root ambari01 ldd lib64 libhandle so 1 linux vdso so 1 gt 0x0000ffff9ea70000 libc so 6 gt lib
  • 天猫精灵是干啥的

    听 听歌 听新闻 听故事 听笑话 听它发癫 查 查天气 查快递 查信息 查购物等等 控 控制智能家居 陪 娃 陪老人 陪自己解闷 看 看视频 看剧 看新闻 看综艺 纯为了摆设 看天猫精灵的颜值 好用的 1 设置早上和晚上的闹钟 可以说 天猫
  • bfs 二叉树 遍历

    bfs 遍历二叉树 之前只知道bfs 的思想以及需要使用队列来进行存储 为了更好的理解bfs 手写了bfs 遍历二叉树的两种方式 方法 一种是采用常用的递归执行 另一种是采用循环执行 使用栈来代替递归 二叉树定义 class Node ge
  • 【计算机毕设选题】计算机毕业设计选题推荐

    大四是整个大学期间最忙碌的时光 很多同学准备考研 考公 或者是需要为自己的毕业设计花费大量的时间 今天是2023年九月5号 大四的同学马上要开始毕业设计 对选题有疑问可以问我哦 详细的联系方式见文末小卡片 一 本人介绍 本人是一名95后全栈
  • 键盘事件keypress 和 keydown、keyup 的用法与区别

    KeyDown 用户摁下摁键时发生 KeyPress 用户摁下摁键 并且产生一个字符时发生 KeyUp 用户释放某一个摁键时触发 定义和用法 完整的 keypress 过程分为两个部分 1 按键被按下 2 按键被松开 当按钮被按下时 发生