KeyPress 和KeyDown 、KeUp之间的区别

时间: 2018-08-14阅读: 1806标签: html

前几天,在写完一个功能模块上线测试的时候,出现了一个诡异的问题。input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。


页面结构:标签上没绑定任何键盘事件,控制器内也没有给元素绑定键盘事件。

<div class="search-input-tel search-input-visit-tel" >
    <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="请输入查询信息!"/>
</div>

表现形式:


谷歌和火狐很正常,什么事都没发生


IE上却自动调用了一个方法,而且始终调用的同一个方法。搞得有点蒙圈,不晓得是咋回事。既然 input框 要调用键盘事件,那就调用吧,大不了我在标签上面绑定定义好的键盘事件方法:

<div class="search-input-tel search-input-visit-tel" >
    <input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="请输入查询信息!"
           ng-keypress="enterQuery($event,'query',1)" ng-change="changesData(private.keyWords)"/>
</div>


键盘回车事件方法:

//回车键功能
$scope.enterQuery = function (event,type,repetitionType) {
    var key =  window.event ? window.event.keyCode : event.which;       //获取键盘码;window.event.keyCode 获取IE下的键盘码,event.which获取非IE下的键盘码
    if (key === 13) {       //回车键键盘码为13
        try {
            if (window.event) { //ie
                $scope.clientsHeavy(type,repetitionType);
                window.event.returnValue = false;
            } else {    //非IE
                $scope.clientsHeavy(type,repetitionType);
                return false;
            }
        }
        catch (ex) {
        }
    }
};

  这下解决了 input框 回车自动调用方法的问题。

  现在返回来看他们之间的区别,在此我用了 keypress 事件,而没有用 keyup 事件,因为keyup事件在IE上和谷歌上表现形式又不一样。同样是执行 console.log("键盘码:key="+ key);

  谷歌浏览器:keypress 事件和 keydown 事件,以及 keyup 事件,三者执行结果一样,控制台都会打印:   键盘码:key=13

  IE浏览器:keypress 事件和 keydown事件,控制台也都会打印:键盘码:key=13 ;但是到了 keyup事件,控制台则不打印:键盘码:key=13,这表示keyup事件并没有执行我们自定义的方法,反而又出现了自动调用方法的情况。所以自己在这总结下,他们仨之间的区别,加深印象。

 

/****下面抄一段对键盘事件和键盘码 (ASCII码),以及KeyPress 和KeyDown 、KeUp事件的描述****/   

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

1.按键的类型

  Windows窗体将键盘输入标识为 由按位Keys枚举 表示的虚拟键代码。使用Keys枚举,可以综合一系列按键以生成单个值,这些值与WM_KEYDOWN和WM_SYSKEYDOWNWindows消息所伴随的值相对应。另外,程序开发人员可通过处理KeyDown或KeyUp 事件来检测大多数物理按键操作。字符键是Keys枚举的子集,它们与WM_CHAR和WM_SYSCHAR Windows消息所伴随的值相对应,如果通过组合按键得到一个字符,则可以通过处理KeyPress事件来检测该字符。

事件定义:

  1. KeyDown:在控件有焦点的情况下按下键时发生。
  2. KeyPress:在控件有焦点的情况下按下键时发生。(下面会说和KeyDown 的区别)
  3. KeyUp:在控件有焦点的情况下释放键时发生。

2.键盘事件的顺序

  一个控件上可能出现3个与键盘相关的事件,下面是这些事件发生的常规顺序:

  • 用户按“a”键,该键将被预处理和调度,同时会触发KeyDown事件。
  • 用户按住“a”键,该键将被预处理和调度,同时会触发KeyPress事件。
  • 用户松开“a”键,该键将被预处理和调度,同时会触发KeyUp事件。

  但是KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,则不会触发KeyUp事件。

3.键的预处理

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

4. 系统组合键的判定

  在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此,如何进行判定?

  通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用 KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定)。

5. 捕获PrScrn按键事件

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

6.KeyPress 和KeyDown 、KeyUp之间的区别

  1. KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
  2. KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
  3. KeyPress 只能捕获单个字符
  4. KeyDown 和KeyUp 可以捕获组合键。
  5. KeyPress 可以捕获单个字符的大小写
  6. KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
  7. KeyPress 不区分小键盘和主键盘的数字字符。
  8. KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
  9. 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

/*********************************************************************************************************************************************************************************************************************************************************************************/

  抄抄了那么多,感觉有点过于理论化,其实我们在按下一个键时,KeyDown和KeyPress两个都要发生(一个在前,一个在后),虽然两个看上去没什么区别,但是两者还是有本质的区别。而 keyup 则是我们将按键抬起时触发的,属于整个按键过程的最后阶段,所以有其特定的用处,最典型的就是左右数据预览,以及获取最后一个点击字符。

下面是测试代码和注释:(结果就只能自己打开去看了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keydown、keypress、keyup的区别</title>
    <style>
        .area{
            float: left;
            display: inline;
            width: 50%
        }
    </style>
</head>
<body>
<div>
    <!--keydown、keypress、keyup触发的先后顺序-->
    <span>随意输入一些字符:</span> <input type="text"/>
    <p>当 keydown、keypress 和 keyup 事件相继触发时,输入区域会改变颜色。从而可以看出三个事件触发的先后顺序</p>
    <p>在 keypress 一直按着不放开,keyup事件不会触发,但该按键状态码会一直被获取,文本框数据会一直添加</p>
</div>

<div>
    <div>
        <textarea id="t1"></textarea>
        <div id="v1"></div>
    </div>
    <!--按键按下触发keydown事件,t1显示当前按键字符,v1始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加,同样v1的数据也会一直往后添加-->

    <div>
        <textarea id="t2"></textarea>
        <div id="v2"></div>
    </div>
    <!--按键按下触发keypress事件,t2显示当前按键字符,v2始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加,同样v2的数据也会一直往后添加-->

    <div>
        <textarea id="t3"></textarea>
        <div id="v3"></div>
    </div>
    <!--按键按下触发keyup事件,t2显示当前按键字符,按键不放开则当前字符会一直往后添加,但v2并不能获取到新输入的字符数据-->
    <div></div>

    <!--这里分别给三个textarea标签绑定三种事件,其中t1,t2均不能实时将数据同步到v1,v2中(总是缺少当前正在输入的字符),keydown、keypress因为是按下按键就触发,所以按下按键时当前输入字符并未返回,因而不能实时同步。
    而keyup则不一样,keyup必须等到按键松开才能触发,才能将数据同步,当然如果我一直按着按键(一直处于keydown、keypress阶段),虽然textarea数据一直在往后添加,但是下面div的数据却无法同步,必须要按键松开才能同步。
    这样就说明了这三种事件触发之间的区别,keydown是在按下时触发,虽然返回键盘的代码,但还没得到最后的输入结果;keypress也是一样,虽然得到了ASCII字符,但还没得到需要的字符;keyup才能得到最后的完整数据。
    因而keyup适用于文本框的数据输入和同步,keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。所以可以根据不同的需求,适当的选择!-->

</div>

<div>
    <!--在看了三者之间的细小差别后,再来看下keydown、keypress之间的区别-->
    <div>
        <span>随意输入一些字符:</span><input type="text"/>
        <p>这里显示keydown事件返回的数据:</p><span id="keydown"></span>
    </div>
    <div>
        <span>随意输入一些字符:</span><input type="text"/>
        <p>这里显示keypress事件返回的数据:</p><span id="keypress"></span>
    </div>
</div>

<script type="text/JavaScript" src="./framework/jquery-1.8.0.min.js"></script>
<script type="text/JavaScript">
    $(document).ready(function () {
        $(".keydown-keyup").keydown(function () {
            console.log("keydown正在执行!");
            $(".keydown-keyup").css("background-color", "#FF0000");
        });
        $(".keydown-keyup").keypress(function () {
            console.log("keypress正在执行!");
            $(".keydown-keyup").css("background-color", "#FFA500");
        });
        $(".keydown-keyup").keyup(function () {
            console.log("keyup正在执行!");
            $(".keydown-keyup").css("background-color", "#4B0082");
        });

        $('#t1').on('keydown', function () {
            $('#v1').text($(this).val());
        });
        $('#t2').on('keypress', function () {
            $('#v2').text($(this).val());
        });
        $('#t3').on('keyup', function () {
            $('#v3').text($(this).val());
        });


        $(".keydown").keydown(function (event) {
            console.log(event);
            var key =  window.event ? window.event.keyCode : event.which;
            if (window.event) { //ie
                $("#keydown").html("Key: " + key);
                window.event.returnValue = false;
            } else {    //非IE
                $("#keydown").html("Key: " + key);
                return false;
            }
        });
        $(".keypress").keypress(function (event) {
            console.log(event);
            var key =  window.event ? window.event.keyCode : event.which;
            if (window.event) { //ie
                $("#keypress").html("Key: " + key);
                window.event.returnValue = false;
            } else {    //非IE
                $("#keypress").html("Key: " + key);
                return false;
            }
        });
        /**通过对event事件对象的对比,发现keydown和keypress两个事件返回的事件对象基本相同,但有一个很细微的却很重要的区别:charCode值不一样
         * keydown 事件对象的charCode值始终为:0
         * keypress 事件对象的charCode值却跟keyCode值一样(当前按键字符的ASCII字符)。
         * 所以:charCode 返回的是 onkeypress 事件触发键值的字符代码(ASCII字符代码,就是ASCII码,一一对应)。而 keyCode 返回的是 onkeydown onkeypress 以及 onkeyup 事件的键的代码(还是ASCII码)。
         * 整个系统都是采用ASCII码表(ASCII字符和ASCII码一一对应,比如键盘"p"键,对应ASCII字符码:"p",对应ASCII码:112)
         */
    });
</script>
</body>
</html>

  兜了一个大圈,终于对这三者之间的区别有了一定的了解。

  总结:keyup适用于文本框的数据输入和同步,以及数据的获取;keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。

来源:https://www.cnblogs.com/donghuang/archive/2018/08/13/9449912.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1005

关闭

了解HTML及运行原理

HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

HTML的Doctype

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

什么是XHTML?

XHTML代表可扩展超文本标记语言(eXtensible HyperText Markup Language),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML是基于可扩展标记语言(XML),由万维网联盟(W3C)开发

如何用 Python 解析 HTML

用一些简单的脚本,可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。

js 调用向html追加内容

position 是相对于 element 元素的位置,并且只能是以下的字符串之一:1. beforeBegin: 插入到标签开始前,2. afterBegin:插入到标签开始标记之后

页面为要加<!DOCTYPE html>

最近因为写一个js函数,需要用到$(window).height(); 由于手写demo的时候,过于自信,其实对前端方面的认识也不够体系,用文本文件直接敲出来的html代码

基于 HTML5 Canvas 的交互式地铁线路图

地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~

VSCode中快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。文是在VSCode下编写的,其他编辑器如Atom、Sublime Text都支持Emmet

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!