zoukankan      html  css  js  c++  java
  • javascript 中 keyup、keypress和keydown事件

    keyup、keypress和keydown事件都是有关于键盘的事件

    1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发
        keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本

        注意:
            KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
            KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等 除了 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键 外的ANSI字符
            KeyPress 只能捕获单个字符,可以捕获单个字符的大小写,不区分小键盘和主键盘的数字字符。
            KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键
            KeyDown 和KeyUp 可以捕获组合键,对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写,区分小键盘和主键盘的数字字符。
            其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
       keydown、keypress 按着不动会持续执行事件,keyup执行一次

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


    2 .事件处理流程
        在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止
        结果为keydown、keypress事件中return false文本框无法输入文字,在keyup事件中return false文本框可以输入文字
        
        文本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup
        textInput事件是DOM3后支持的,主要用来替换keypress,与keypress的主要差别在于添加了对中文输入法的支持,还有一点就是textInput只在可编辑文本区才能触发(如input、textarea),而keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的支持还不是很好,目前只有safari、chrome支持

    3.CTRL+其它键的组合判定代码
         
        backspace           8           left window        91
        tab                      9           right window      92
        enter                 13           select key           93
        shift                  16          
        ctrl                    17          numpad 0           96
        alt                   18          numpad 1           97
        pause/break     19          numpad 2           98
        caps lock          20          numpad 3           99
        escape              27          numpad 4           100
        page up           33          numpad 5            101
        Space               32          numpad 6            102
        page down      34          numpad     103
        end                  35          numpad 8         104
        home               36          numpad 9        105
        arrow left         37          
        arrow up          38          multiply             106
        arrow right      39          add                     107
        arrow down     40          subtract              109
        insert               45          decimal point     110
        delete              46          divide                 111

        0               48            f1              112
        1               49            f2              113
        2               50            f3              114
        3               51            f4              115
        4               52            f5              116
        5               53            f6              117
        6               54            f7              118
        7               55            f8              119
        8               56            f9              120
        9               57            f10             121

        a               65
        b               66
        c               67
        d               68
        e               69
        f                70
        g               71
        h               72
        i                73
        j                74
        k               75
        l                76
        m              77
        n               78
        o               79
        p               80
        q               81
        r                82
        s                83
        t                84
        u               85
        v               86
        w              87
        x               88
        y               89
        z               90


  • 相关阅读:
    i18n在4种常见环境下使用的方式
    vue-style里面设置变量
    扫码登录功能如何实现?一文搞懂主流的扫码登录技术原理
    Gradle编译Spring源码
    Spring学习总结(7)-AOP
    Docker安装Redis
    Jvm相关文章
    上传项目到Github
    Win10系统安装MySQL Workbench 8
    [转]HashMap 和 currentHashMap 总结
  • 原文地址:https://www.cnblogs.com/rsky/p/4355291.html
Copyright © 2011-2022 走看看