Dom 键盘事件以及实战案例

键盘事件
  //键盘操作
        //1.某键盘按下执行的操作  document是对文档进行触发
        document.onkeyup = function(){
            console.log('你好')
        }
        document.addEventListener('keyup',function(){
            console.log('你好')
        })
        //2.某键盘按下操作，此执行，只要键盘一直按着，就一直重复执行
        document.onkeydown = function(){   
            console.log('按了键盘')
        }
        document.addEventListener('keydown',function(){
            console.log('我按下了键盘')
        })
        document.addEventListener('keypress',function(){  //keypress 事件是不能识别功能键的，比如：ctrl、左右箭头
            console.log('我按了press键')
        })
        //注意：如果keyup、keydown和keypress，同时出现执行顺序  keydown->keypress->keyup

       //可以查看到执行过程和属性
        document.addEventListener('keyup',function(e){
                console.log(e)
        })
        //keyCode 是对应键盘的Ascll码值
        //注意：keyup和keydown 不区分字母大小写，如果想区分可以用可以keypress
案例一：
        //京东首页按s键光标自动定位到搜索框
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(){ //用keyup事件是因为keydown执行并将内容赋值给input.value
            if(e.keyCode === 83) {  //s的Ascll码是83
                search.focus();     //让搜索框得到光标
            }
        })
案例二：
   //京东订单查询功能
        
"en">


    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    
    


     
class="search">
        
class="con">123
        "text" class="jd" placeholder="请输入快递单号">