JavaScript 键盘事件

键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键时被按下时触发 但是它不自动识别功能键，比如 ctrl shift 箭头等

注意：

1. 如果使用 addEventListener 不需要加 on

2. onkeypress 和前面两个的区别是，它不自动识别功能键，比如左右箭头，shift 等。

3. 三个事件的执行顺序是：keydown – keypress – keyup

---

键盘事件对象

键盘事件对象 属性	说明
keyCode	返回 该 键的 ASCII 值

注意：

1. onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写

2. 在实际中，用到更多的是 keydown 和 keyup，它能识别所有的键(包括功能键)

3. keypress 不识别功能键，但是keyCode 属性区分大小写，返回不同的 ASCII 值

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

	<script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

案例：模拟京东按键输入内容

当我们按下 s 键，光标就定位到搜索框，（文本框获得焦点）。

注意：触发获得焦点，可以使用 focus()

	<input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
		// 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
            // 判断keyCode的值
            if (e.keyCode === 83) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>

案例：模拟快递100单号查询

当我们在文本框输入内容时，文本框上面自动显示大字号内容。

具体思路是：

1. 快递单号输入内容时，上面的大号字体盒子显示
2. 同时把快递单号的值 获取 过来赋值给上面的大号字体盒子
3. 如果快递单号里面的内容为空，则隐藏大号字体盒子
4. keyup 事件触发的时候，文字已经落入文本框里面。
5. 当我们失去焦点，就隐藏这个大号字体盒子，则隐藏大号字体盒子
6. keyup 事件触发的时候，文字已经落入文本框里面。
7. 当我们失去焦点，就隐藏这个大号字体盒子
8. 当我们获得焦点，且文本框内容不为空就显示这个盒子。