js常用的键盘事件和对象

3个常用事件

    // 常见的键盘事件
    // 1.keyup按键弹起的时候触发
    // document.onkeyup = function(){
    //     console.log('我弹起了');
    // }
    document.addEventListener('keyup',function(){
        console.log('我弹起了');
    })
    // 2.keydown 按键按下的时候触发
    document.addEventListener('keydown',function(){
        console.log('我按下了');
    })
    // 3.keypress 按键按下的时候触发(但是不识别功能键 比如ctrl shift)
    document.addEventListener('keypress',function(){
        console.log('我按下了11');
    })

键盘事件对象之keyCode

//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener(‘keyup’,function(e){
// console.log(e);
console.log(‘up：’+e.keyCode);
// 我们可以利用keyCode返回的ASCII码值来判断用户按下了能够键
if(e.keyCode === 65){
alert(‘您按下的a键’);
}else{
alert(‘您没有按下a键’);
}
})
// 1.我们的keyup和keydom事件不区分字母大小写 a 和 A 得到的都是65
// 2.我们的keypress 事件 区分字母大小写
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener(‘keypress’,function(e){
// console.log(e);
console.log(‘press：’+e.keyCode);
})

    // onkeydown和onkeyup 不区分字母大小写，onkeypress区分字母大小写
    // 在我们实际开发中，我们更多的是使用keydown和keyup，它能够识别所有的键（包括功能键）
    // Keypress不识别功能键，但是keyCode属性能够区分大小写，返回不同的ASCII值

使用事件keydown和keyCode模拟京东按钮输入内容

效果如下：用户不需要使用鼠标在搜索框里点击，只需要按下键盘中的"s"键就能够focus到搜索框。
点击"s"前：

点击"s"后:

    /*
        1.核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
        2.使用键盘事件对象里面的keyCode，判断用户按下的是否是s键
        3.搜索框获得焦点：使用js里面的focus()方法
    */
   var search = document.querySelector('input');
   document.addEventListener('keydown',function(e){
       console.log(e.keyCode);
       if(e.keyCode === 83){
           search.focus();
       }
   })

使用事件keyup实现该功能

效果如下:

核心思想:
// 1.快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
// 2.表单检测用户输入： 给表单添加键盘事件
// 3.同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
// 4.如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
代码实现:

    * {
        margin: 0;
        padding: 0;
    }
    
    .search {
        position: relative;
        width: 178px;
        margin: 100px;
    }
    
    .con {
        display: none;
        position: absolute;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
    }
    
    .con::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
    }

    <div class="con">123</div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">

    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    jd_input.addEventListener('keyup', function() {
            // console.log('输入内容啦');
            if (this.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerText = this.value;
            }
        })
        // 当我们失去焦点，就隐藏这个con盒子
    jd_input.addEventListener('blur', function() {
            con.style.display = 'none';
        })
        // 当我们获得焦点，就显示这个con盒子
    jd_input.addEventListener('focus', function() {
        if (this.value !== '') {
            con.style.display = 'block';
        }
    })

知识来源

知识属于网课来源，边看视频边总结，总结可能存在一些不足，欢迎你来唠叨和指教