• 键盘与文本事件


    1. keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,就会重复触发此事件。
    2. keypress:当用户按下键盘上的任意键时触发,而且如果按住不放的话,就会重复触发此事件。
    3. keyup:当用户释放键盘上的键时触发
    4. textInput:文本事件
      当先触发keydown事件,然后紧跟着是keypress事件,最后是keyup事件
      其中keydown和keypress都是在文本框发生变化之前被触发的,而keyup事件则是在文本框发生变化之后被触发的

    keyCode与charCode的区别

    keyCode属性:  表示键盘按键码。因此输入“a”字母和“A”字母时,都是显示键盘码 65 ;IE 与  w 3c兼容浏览器 keydown ,keyup 时 event 的 keyCode 为实际按键的值 。例如shift + a ==  16 + 65

    charCode 属性:表示输入字符码。因此输入“a”字母和“A“字母时,分别显示 97(a 字符码)和 65(A 字符码);w3c兼容浏览器在 keypress(shift等非实际值键忽略) 时 event 存在 charCode 属性为对应字符值,keyCode 统一为0。IE 只有 keyCode, 则在 keypress(shift等非实际值键忽略) 时仍然采用 keyCode ,不过此时为对应字符值,没有charCode 属性。例如:

    shift + a : {

    ie: keyCode :97 ,charCode:undefined

    firefox : keyCode:0 ,charCode:97

    }

    注意:

    在标准的DOM 中:既有keyCode属性,还有charCode 属性。

            但在标准的DOM 中,keypress 事件中keyCode 属性值始终为0 值;

    IE 浏览器中:事件对象只有keyCode属性,没有charCode 属性。

            但在IE 浏览器中,keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值;

    IE下,keyCode:对于keypress事件,表示按下按键的Unicode字符;对于keydown/keyup  事件,表示按下按键的数字代码。无charCode属性。

    DOM标准下keyCode:表示按下按键的数字代码。charCode:按下按键的Unicode字符。

     

    当我按下“a键(注意是小写的字母)时,

    keydown代表的是按键

    keypress代表的是按键所代表的ASC码的字符值

    在火狐中会得到
    keydown:keyCode is 65  charCode is 0

    keypress:keyCode is 0    charCode is 97

    keyup:  keyCode is 65  charCode is 0

    在谷歌中会得到
    keydown:keyCode is 65  charCode is 0

    keypress:keyCode is 97   charCode is 97

    keyup:  keyCode is 65  charCode is 0

    在IE中会得到
    keydown:keyCode is 65  charCode is undefined

    keypress:keyCode is 97   charCode is undefined

    keyup:  keyCode is 65  charCode is undefined

     

    而当我按下shift键时,

    在火狐中会得到
    keydown:keyCode is 16  charCode is 0

    keyup:  keyCode is 16   charCode is 0

    不会得到任何的charCode值,因为按shift并没输入任何的字符,而且也不会触发keypress事件

    在谷歌中会得到
    keydown:keyCode is 16  charCode is 0

    keyup:  keyCode is 16   charCode is 0

    在IE中会得到
    keydown:keyCode is 16  charCode is undefined

    keyup:  keyCode is 16   charCode is undefined

     

        在keydown事件里面,事件包含了keyCode –  用户按下的按键的物理编码。在keypress里,keyCode包含了字符编码,即表示字符的ASCII码。这样的形式适用于所有的浏览器–  除了火狐,它在keypress事件中的keyCode返回值为0。

    如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keyCode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输入的字符,那么就使用keypress来获取,然后获取charCode(火狐和safari)或是keyCode(其他浏览器)。

     实例:

     

    <html>
    <head>
    <title>键盘事件</title>
    <script language="javascript">
    function handle(oEvent){
     
       if(window.event){
           //处理兼容性,获得事件对象
          oEvent = window.event;
     
          //设置IE的charCode值
          oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
       }
       var oDiv = document.getElementById("display");
       //输出测试
       oDiv.innerHTML += oEvent.type              // 事件名称
         + ": charCode:" + oEvent.charCode        // 字符码 charCode
         + " keyCode:" + oEvent.keyCode + "<br>"; // 键盘码 keyCode
        }
        window.onload = function(){
           var oTextArea = document.getElementsByTagName("textarea")[0];
           oTextArea.onkeypress = handle;
           oTextArea.onkeydown = handle;
        }
    </script>
    </head>
    <body>
       <textarea rows="4"cols="50"></textarea>
       <div id="display"></div>
    </body>
    </html>

     获得按键的charCode的兼容性写法

    getCharCode: function(event){
                    if (typeof event.charCode == 'number')//首先检测按键有没有代表的字符,如果没有就没有charCode,为undefined
                    {
                        return event.charCode;
                    }else {
                        return event.keyCode
                    }
                }

    在获取了字符编码后就可以使用:

    String.fromCharCode('获得的字符编码')

    将其转换为实际字符

     

     

     

  • 相关阅读:
    centos7安装nginx和php7启动脚本
    centos7 安装nginx遇到的坑
    php7.2 编译遇到的坑
    yum源更新
    redis
    nginx日志分割
    Docker部署LNMP完整教程
    浅谈JavaScript词法分析步骤
    PHP面向对象中的重要知识点(一)
    Mysql精华版(命令大全)
  • 原文地址:https://www.cnblogs.com/jokes/p/9693237.html
Copyright © 2020-2023  润新知