键盘事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){

            /* 
               键盘事件：
                onkeydown
                    -按键被按下
                    -对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
                    -当onkeydown触发时，对于第一次和第二次之间会间隔稍微长一点，其他的会非常快
                        这种设计是为了防止误操作的发生。
                onkeyup
                    -按键被松开

                键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
             */


             document.onkeydown=function(event){
                 event=event||window.event;

                 /* 
                    可以通过keyCode来获取按键的编码
                    通过它可以判断哪个按键被按下
                    除了keyCode，事件对象中还提供了几个属性
                    altKey
                    ctrlKey
                    shiftKey
                        -这三个用来判断alt ctrl 和shift是否被按下
                            如果按下则返回true，否则返回false
                  */


                //   console.log(event.keyCode);
                // 判断y和ctrl是否同时被按下
                if(event.keyCode === 89 && event.ctrlKey){
                    console.log("ctrl和y都被按下了");
                }
                 
                // console.log(event);
             };
             /* document.onkeyup=function(){
                console.log("按键松开了~~");
             };*/
 
//------------------------------------------------------------------------------------------
            //  获取input
            var input=document.getElementsByTagName("input")[0];
            input.onkeydown=function(event){
                event=event||window.event;

                // console.log(event.keyCode);
                // 数字48-57
                //使文本框中不能输入数字 

                if(event.keyCode >= 48 && event.keyCode <=57){
                // 在文本框中输入内容，属于onkeydown的默认行为
                // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                return false;
                }             
            };
            };
    </script>
</head>
<body> 
    <input type="text">

    <!-- <div style="width: 100px; height: 100px; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div> -->
</body>
</html>

 

 

posted @ 2020-12-26 09:20  Hhhr  阅读(86)  评论(0)    收藏  举报