键盘事件

1 keyup 按键弹起的时候触发

2 keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头

3 keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头

document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })
document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })

键盘事件对象

使用keyCode属性判断用户按下哪个键

// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
        })
        document.addEventListener('keypress', function(e) {
            console.log(e);
            console.log('press:' + e.keyCode);
        })

每个按键所对应的键码

案例:文本框输入什么内容上面就显示什么内容

 <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入值" class="inp">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var input = document.querySelector('.inp');
        // 给输入框注册keyup事件
        input.addEventListener('keyup', function() {
                // 判断输入框内容是否为空
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    // 不为空设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 给输入框注册失去焦点事件
        input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 给输入框注册获得焦点事件
        input.addEventListener('focus', function() {
            // 判断输入框内容是否为空
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>