zoukankan      html  css  js  c++  java
  • onkeydown 、onkeypress 、onkeyup详解

    keydown: 当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。

    keypress: 当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。

    (keypress事件存在跨浏览器问题,按下非字符键时有的也会触发keypress。)

    keyup: 当用户释放键盘上的按键时触发。

      在用户按了一下键盘上的字符键时,首先会触发 keydown 事件,然后紧接着是 keypress 事件,最后会触发 keyup 事件。其中,keydown 和 keypress 都是在文本框发生变化之前被触发的;而 keyup 事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放,就会重复触发 keydown 和keypress 事件,直到用户松开该键为止。

    window.onkeydown = function () {
      console.log('down');
    }
    window.onkeypress = function () {
      console.log('press');
    }
    window.onkeyup = function () {
      console.log('up');
    }

     执行以上代码如果按下任意字符键之后立即松开, 控制台会打印出:

    down
    press
    up

    如果按下字符键不放最后再松开,控制台会打印出:

    down
    press
    down
    press
    //一直触发这两个事件
    up

      如果用户按下的是一个非字符键,那么首先会触发 keydown 事件,然后就是 keyup 事件。如果按住这个非字符键不放,那么就会一直重复触发 keydown 事件,直到用户松开这个键,此时会触发 keyup 事件。

    键码:

    在发生 keydown 和keypress 事件时,event 对象的 keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。请看下面这个例子:

    var textbox = document.getElementById('myText');
    textbox.addEventListener('keyup', function (event) {
      console.log(event.keyCode);
    }, false);

    在这个例子中,用户每次在文本框中按键触发 keyup 事件时,都会显示 keyCode 的值。

    在取得了字符编码后,就可以使用 String.fromCharCode() 将其转换成实际的字符。如下:

    var textbox = document.getElementById('myText');
    textbox.addEventListener('keyup', function (event) {
      console.log(String.fromCharCode(event.keyCode));
    }, false);
  • 相关阅读:
    Amphiphilic Carbon Molecules [UVA
    2018宁夏邀请赛I题 bubble sort(思维题
    CF1198E Rectangle Painting 2(最小割 思维
    Problem : 这个题如果不是签到题 Asm.Def就女装(积性函数dp
    cogs2223. [SDOI2016 Round1] 生成魔咒(后缀数组 hash 二分 set
    cogs1709. [SPOJ 705] 不同的子串(后缀数组
    cogs249 最长公共子串(后缀数组 二分答案
    hdu2222 Keywords Search (AC自动机板子
    ccpc网赛 hdu6703 array(权值线段树
    ccpc网赛 hdu6705 path(队列模拟 贪心
  • 原文地址:https://www.cnblogs.com/jongsuk0214/p/6893782.html
Copyright © 2011-2022 走看看